如何将此媒体查询转换为 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

Answer 2

本文中的最佳解决方案：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
}

Answer 3

if ($(window).width() <= 768){
    $('ul.nav li.dropdown ul.dropdown-menu').css('display', 'block');
}

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

How to convert this media query to jquery?

css

jquery

media-queries

twitter-bootstrap

使用 Modernizr：