javascript - 窗口调整大小功能随机不起作用

Question

我正在使用 JS/jQuery 开发响应式菜单。菜单可以工作，但如果您在“移动”区域(1024px)内调整窗口大小，下拉选项卡的切换功能将随机停止工作。

这是脚本:

$(document).ready(function(){
    function mobile(){
        $('.menu-toggle').click(function(){
        $('#menuM').toggle();
    });
}

$(window).resize(mobile);
mobile();

function resMenu() {
    var sTest = $('#sizeTest').css('float');
    $('#sizeTestText').text("current sizeTest = " + sTest);

    if (sTest === 'left') {
        $('nav').attr('id', 'menuM');
        $('#menuM').hide();
        $('#menuM .has-sub').click(function(e) {
            e.preventDefault();
            $('#menuM ul li').not($(this).parent()).removeClass('tap');
            $(this).parent().toggleClass('tap');
        });
    }
    else {
        $('nav').attr('id', 'menu');
        $('#menu').show();
        $('#menuM ul li').removeClass('tap');
    }

    var navTest = $('nav').attr('id');
    $('#linkTest').text("current nav id = " + navTest);
}

$(window).resize(resMenu);
resMenu();
});

任何帮助将不胜感激。

Answer 1

您在事件处理程序中有一个事件处理程序，重构您的代码如下

$(window).resize(function() {
    $('.menu-toggle').click(function(){
        $('#menuM').toggle();
    });
});

当调整窗口大小时，调整大小事件会触发数百次甚至数千次，因此您刚刚添加了几千个点击处理程序。

许多很多点击处理程序相互抵消，因此只有当您拥有奇数个点击处理程序时(例如，当您最终拥有偶数个点击处理程序时)，它才有效当 resize 事件触发 1032 次时，toggle 效果将被取消。