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

Question

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

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

Answer 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