基于实时媒体查询的 jQuery 变量答案

【问题标题】：jQuery variable based on live media query基于实时媒体查询的 jQuery 变量
【发布时间】：2012-09-23 11:15:16
【问题描述】：

我正在创建一个基于 CSS3 媒体查询 (lessframework) 的响应式设计网站。我正在使用的导航在悬停时显示下拉菜单，但是当屏幕调整大小并进入 iPad 或移动视图时，我需要将导航更改为 onclick，目前这在刷新页面后有效，但不是你调整页面大小。

我需要将代码更改为.live() 或其他内容，以便在调整窗口大小时不必刷新页面。

代码如下：

if ($('body').css('width') === '992px') {
    $('#nav li').hover(function () {
        //show its submenu
        $('ul.sub', this).stop().slideDown(100);
    }, function () {
        //hide its submenu
        $('ul.sub', this).stop().slideUp(100);
    });
    //sub sub menu
    $('#nav ul li').hover(function () {
        $('ul', this).stop().slideDown(100);

    }, function () {
        $('ul', this).stop().slideUp(100);
    });
} else {

    $("ul.sub2>li").click(function () {

        return false;
    });
    $("ul.sub>li").click(function () {

        return false;
    });
    $("ul.sub>li:has(ul.sub2)").click(function () {

        $('.sub2').slideUp();
        $("ul.sub2", this).slideDown();
        return false;
    });

    $("ul#nav>li:has(ul.sub)").click(function () {
        $('.sub').slideUp();
        $('.sub2').slideUp();
        $("ul.sub", this).slideDown();
    });


}
});

【问题讨论】：

而不是if ($('body').css('width') === '992px') {，您应该使用$(window).width()。

标签： jquery variables navigation live media-queries

【解决方案1】：

Resize 是您应该在窗口对象上监听的 jquery 事件，以便能够在窗口大小更改时执行操作。例如，如果宽度是“ipad 宽度与否”，您可以有一个变量存储，您会在窗口调整大小时更新。

var ipad_width = $(window).width() < 992; //ipad_width => true || false

$(window).on('resize', function () {
     ipad_width = $(window).width() < 992
});

为了避免每次调整浏览器大小时绑定越来越多的事件，我认为一个简单的解决方案是从一开始就绑定所有事件，并在绑定函数中添加一个 if 语句，该语句应该只在 ipad 视图或不在 ipad 视图中。举个例子：

$("ul.sub2>li").click(function () {
    if (ipad_width) {
        return false;
    }
});

还有：

$('#nav li').hover(function () {
    if (!ipad_width) {
        //show its submenu
        $('ul.sub', this).stop().slideDown(100);
    }
}, function () {
    if (!ipad_width) {
        //hide its submenu
        $('ul.sub', this).stop().slideUp(100);
    }
});

【讨论】：