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

Question

我正在创建一个网站，该网站将具有基于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();
    });

}
});

Answer 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);
    }
});