当屏幕尺寸较小时，Javascript 将链接添加到移动菜单。不再有效。

Question

当浏览器宽度小于 1024 像素时，我构建了一个带有移动导航的网站。我使用这个 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

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