0

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

我需要的是用 a.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();
    });


}
});
4

1 回答 1

0

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);
    }
});
于 2012-09-23T19:02:13.767 回答