【问题标题】:How to convert this media query to jquery?如何将此媒体查询转换为 jquery?
【发布时间】:2016-03-30 17:10:01
【问题描述】:

我想编写 jquery 代码,当我的网站通过移动设备加载时显示所有子菜单。此代码存在于 Bootstrap.css 文件中。请指教。

        @media screen and (max-width: 768px) {         
      ul.nav li.dropdown ul.dropdown-menu{ display: block; }
}

【问题讨论】:

    标签: jquery css twitter-bootstrap media-queries


    【解决方案1】:

    请记住 $(window).width() 和 CSS 计算的宽度因滚动条而不同,在某些情况下 .innerWidth 会起作用,但是这也是不依赖的东西。

    如果不需要 IE9 支持,那么您可以使用 window.matchMedia() (MDN documentation)。

        if (window.matchMedia('(max-width: 768px)').matches) {
            $("ul.nav li.dropdown ul.dropdown-menu").show();
        } else {
            $("ul.nav li.dropdown ul.dropdown-menu").hide();
        }
    

    window.matchMedia与CSS媒体查询完全一致,浏览器支持相当不错:http://caniuse.com/#feat=matchmedia

    使用 Modernizr:

    Modernizr 是一个基于 JS 的库,如果你需要支持更多的浏览器可以使用Modernizr's mq method,它支持所有能够理解 CSS 媒体查询的浏览器。

    if (Modernizr.mq('(max-width: 768px)')) {
        $("ul.nav li.dropdown ul.dropdown-menu").show();
    } else {
        $("ul.nav li.dropdown ul.dropdown-menu").hide();
    }
    

    Source

    【讨论】:

    • 这是一个完整的答案。谢谢。
    • @programmer138200 很高兴它有帮助,请考虑投票并将其标记为正确答案。
    【解决方案2】:
    if ($(window).width() <= 768){
        $('ul.nav li.dropdown ul.dropdown-menu').css('display', 'block');
    }
    

    【讨论】:

      【解决方案3】:

      本文最佳解决方案:http://www.sitepoint.com/javascript-media-queries/

      var mq = window.matchMedia( "(min-width: 500px)" );
      if (mq.matches) {
          // window width is at least 500px
      }
      else {
          // window width is less than 500px
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-05-13
        • 2019-09-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-12-05
        • 2021-05-16
        相关资源
        最近更新 更多