当屏幕尺寸较小时，用于向移动菜单添加链接的Javascript。 不再有效。

Question

当浏览器宽度小于1024px时，我用移动导航构建了一个网站。 我使用此javascript（使用jQuery）添加了一些链接以关闭菜单。 该站点现在不加载这些链接，而是在页面加载时打开，而不是关闭。 我是否错过了一些不起作用的明显原因？

agirlwithacupcake.com是使用wordpress的实时站点。

var eventFired = 0;

if ($(window).width() < 1024) {
    $('#navigation').hide();
    $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-left">&#x25BC;</a>');
    $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-right">&#x25BC;</a>');

}
else {
    $('#navigation').show();
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired) {
        if ($(window).width() < 1024) {
            $('#navigation').hide();
            $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-left">&#x25BC;</a>');
            $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-right">&#x25BC;</a>');
        } else {
                $('#navigation').show();
        }
    }
});

如果我的问题措辞很奇怪，或者帖子中做错了事，我深表歉意。 这是我在stackoverflow上的首次互动

Answer 1

我检查了您的网站，发现“ eventfired”未定义（即使您在帖子中已定义了它）。

$(window).on('resize', function() {
if (!eventFired) {
    if ($(window).width() < 1024) {
        $('#navigation').hide();
        $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-left">&#x25BC;</a>');
        $('.menu-main-menu-minus-store-container ul').before('<a href="#" class="menutoggle arrow-right">&#x25BC;</a>');
    } else {
            $('#navigation').show();
    }
}});    

摆脱

if(!ebentFired) {}    

或确保添加

var eventFired = 0; 

到http://agirlwithacupcake.com/wp-content/themes/agirlwithacupcake/lib/js/scripts.js

我建议始终检查萤火虫，这对故障排除很有帮助。 http://getfirebug.com/