Question

除了调整浏览器大小时，我还有以下代码。代码基本上检查文档准备好的浏览器大小和浏览器调整大小以确定是否应显示菜单。但是，在调整大小时，菜单会在单击时多次上下滑动。我假设它注册为多次调整大小，因此多次激活slidetoggle。请参阅问题示例：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);

Answer 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/

Answer 2

问题是，无论何时调整浏览器大小，都会触发回调并绑定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;
    }
});

Jquery slidetoggle文档就绪和浏览器调整大小

2 个答案: