0

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

这一切在 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 事件只是拒绝随之触发。

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

4

2 回答 2

2

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

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

于 2012-10-19T11:35:48.253 回答
2

将视口检查放在点击事件处理程序中。就像现在一样，如果检查在页面加载时评估为 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'); 
            });
        }
    }
}​);​
于 2012-10-19T11:44:05.497 回答