Question

在调用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);

谢谢！

Answer 1

发生了什么每次时间你调整窗口大小（我猜计算页面加载）你绑定到点击项目的事件。因此，当您调整窗口大小一次时，事件将触发两次，然后打开下拉列表然后关闭。如果再次调整窗口大小，则下拉列表现在打开，关闭，然后再次打开。长话短说，你应该只绑定一次！如果您想要更改绑定（如果他们切换到移动视图），那么您应该unbind然后以不同的方式重新绑定。

祝你好运！

Javascript onResize触发螺丝动画

1 个答案: