0

在调用 onResize 之后，我的下拉菜单出现问题。在新页面上加载下拉导航正确，但如果您调整浏览器大小并单击子导航的下拉菜单，它会快速移动并且不会保持打开状态。

这是一个现场演示。

这里只是 JS：

var res;
onResize = function() {
var responsive_viewport = $(window).width();
var mobile_menu = $('nav div span');
var mobile_list = $('nav div #main-nav');

if (res){ clearTimeout(res)};
res = setTimeout(function(){
    console.log("resize triggered");

    if (responsive_viewport <= 1024) {

        mobile_menu.add(mobile_list).click(function(event) {
            mobile_list.slideToggle('fast', 'swing', function() {
                mobile_list.toggleClass('active');
            });
            event.stopPropagation();
        });

        $(document).click(function() {
            if (mobile_list.hasClass('active')) {
                mobile_list.slideToggle('fast', 'swing', function() {
                    mobile_list.removeClass('active');
                });
            }
        });
    }
    if (responsive_viewport <= 768) {
        console.log('on mobile');
        nextvid.addClass('mobile');
    } else {
        nextvid.removeClass('mobile');
    }

},200);
}
$(document).ready(onResize);
$(window).bind('resize', onResize);

谢谢！

4

1 回答 1

1

每次您调整窗口大小（我猜是计算页面加载）时，都会发生这种情况，您会绑定到单击该项目的事件。因此，当您调整一次窗口大小时，事件会触发两次，下拉菜单会打开然后关闭。如果您再次调整窗口大小，下拉菜单现在会打开、关闭，然后再次打开。长话短说，您应该只绑定一次！如果您想更改绑定（例如，如果他们切换到移动视图），您应该取消绑定，然后以不同的方式重新绑定。

祝你好运！

于 2013-07-20T04:12:48.397 回答