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

Javascript to add links to mobile menu when screen size is smaller. No longer works.

本文关键字：菜单 移动 添加 链接 有效 不再 Javascript 可使用 屏幕 小时      更新时间：2023-09-26

当浏览器宽度小于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 上的第一次交互

我检查了你的网站，它看起来没有定义"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/

相关文章：