如何将此媒体查询转换为 jquery？答案

【问题标题】：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
}

【讨论】：