1

我有以下代码，除了在我调整浏览器大小时效果很好。该代码基本上检查文档准备好的浏览器大小和浏览器调整大小以确定是否应显示菜单。但是，在调整大小时，单击时菜单会上下滑动多次。我假设它多次注册为调整大小，因此多次激活滑动切换。请参阅问题示例：http: //jsfiddle.net/8mLvp/2/

function doMenu() {

    $('.menu').slideToggle();

    if ($('.menu2').is(":visible")) {
        $('.menu2').hide();
    } else {
        $('.menu2').show();
    }
    return false;
   }

}
$(document).ready(doMenu);
$(window).resize(doMenu);
4

2 回答 2

1

有多种方法可以实现这一点，但使用超时是最简单的。这将检查用户是否已完成调整大小

function doMenu() {
 //your stuff to happen here
}

var TO = false;
$(window).resize(function(){
 if(TO !== false)
    clearTimeout(TO);
 TO = setTimeout(doMenu, 200); //200 milisecond check
});

在这里查看我的示例http://jsfiddle.net/8mLvp/

于 2013-04-02T12:25:13.860 回答
1

问题是，每当您调整浏览器的大小时，都会触发回调并绑定 click 事件。因此，如果您多次调整大小，click 事件会被多次绑定，因此回调会被多次调用。只需检查单击处理程序本身的宽度并仅分配一次单击处理程序：

$('.icon-menu-2').click(function () {      
    var width = $(window).width();

    if (width < 530) {
        $('.menu').slideToggle();

        if ($('.menu2').is(":visible")) {
            $('.menu2').hide();
        } else {
            $('.menu2').show();
        }
        return false;
    }
});
于 2013-04-02T14:23:13.460 回答