Question

我有一个相当简单的导航菜单，可以在点击时打开和关闭。仅当浏览器视口低于特定大小时，菜单行为才会起作用。

90％的时间都很好用。剩余的10％的时间（当我向客户端演示时，natch）点击事件根本不会触发。据我所知，问题只发生在浏览器调整大小几次之后，但由于它通常在窗口调整大小时正常工作，因此很难找到它发生的原因。

代码：

var smallViewport = false;

$(document).ready(function(){
    if($(window).width() < 520) {
        smallViewport = true;
    } 

    if(smallViewport == true) {
        $('nav.main').click(function(){
            console.log(' + clicky clicky');
            if($(this).find('.level-1').hasClass('open') == true) {
                $(this).find('.level-1').slideUp('fast').removeClass('open');
            } else {
                $(this).find('.level-1').slideDown('fast', function(){ $(this).addClass('open'); });
            }
        })
    }
});

$(window).resize(function() {

    if($(window).width() < 520) {
        smallViewport = true;
    } else {
        smallViewport = false;
    }
    console.log(smallViewport);

    if(smallViewport == true) {
        $('.level-1').removeClass('open').css('display','none');
    } else {
        $('.level-1').css('display','block');
    }

});

当问题选择显示自身时，resize函数中的console.log（smallViewport）输出'true'时应该为true，click事件只是拒绝与它一起触发。

以前有人遇到过类似的问题吗？我缺少任何明显的解决方案？

Answer 1

您只是在加载页面时绑定点击，而不是在调整页面大小时

如果$(window).width() < 520在页面加载时评估为false，则不会绑定click事件 - 这就是您的控制台日志正确但事件未触发的原因

Answer 2

将视口检查放在click事件处理程序中。就像现在一样，如果检查在页面加载时评估为false，则不绑定事件处理程序。尝试将其更改为：

$('nav.main').click(function(){
    if(smallViewport == true) {
        console.log(' + clicky clicky');
        if($(this).find('.level-1').hasClass('open') == true) {
            $(this).find('.level-1').slideUp('fast').removeClass('open');
        } else {
            $(this).find('.level-1').slideDown('fast', function() {
                $(this).addClass('open'); 
            });
        }
    }
});

浏览器调整大小后，jquery click事件并不总是触发

2 个答案: