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 width or not”，则可以使用变量存储，并在窗口调整大小时更新。

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

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

1 个答案: