屏幕尺寸较小时添加移动菜单链接的 Javascript。不再工作。答案

【问题标题】：Javascript to add links to mobile menu when screen size is smaller. No longer works.屏幕尺寸较小时添加移动菜单链接的 Javascript。不再工作。
【发布时间】：2013-11-22 15:07:27
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案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/

【讨论】：