Javascript 我的手机菜单代码在页面加载时首先闪烁菜单，然后隐藏

我已经在多个站点上使用了这个脚本，现在我有很多站点都有相同的bug，我需要帮助一次性解决这个问题，这样我就不会一直将相同的bug转移到新的生产服务器上

我让一个承包商为WordPress手机菜单设计了以下内容。它工作得很好，但不幸的是，当页面第一次加载时，菜单加载到内容上，然后隐藏。我一辈子都搞不清楚是什么导致了这种情况，或者我应该向代码中添加什么额外的JavaScript命令来删除页面加载时的隐藏

以下是jquery：

<script type="text/javascript">
//mobile menu
jQuery(function() {
    jQuery('#menu_btn').click(function() {
        if(jQuery('#main_menu').is(':visible')) {
            jQuery('#main_menu').animate({ left: '-100%' }, 'slow', function () { 
                jQuery("#main_menu").css('display', 'none');
                jQuery('#menu_close').css('display', 'none');  
            });
        } else {
            jQuery("#main_menu").css('display', 'block');
            jQuery('#main_menu').animate({ left: '0' }, 'slow', function(){
                jQuery('#menu_close').css('display', 'block'); 
            });
        }
    });

    jQuery('#menu_close').click(function() {
        jQuery('#main_menu').animate({ left: '-100%' }, 'slow', function () { 
            jQuery("#main_menu").css('display', 'none'); 
        });
    });

    callOnResize();
});

jQuery(window).resize( function(){
    callOnResize();
});

function callOnResize() {
    var winwidth = jQuery(window).width();
    if (winwidth < 760) {
        jQuery( '#main_menu' ).css({ display: 'none' });
        jQuery('#main_menu').animate({ left: '0' }, 'slow');
    } else if (winwidth >= 760) {
        jQuery( '#main_menu' ).css({ display: 'block' });
    }
}
</script>

//移动菜单
jQuery（函数（）{
jQuery（“#菜单_btn”）。单击（函数（）{
if（jQuery（“#主菜单”）是（“：可见”）{
jQuery（“#主菜单”）.animate（{left:'-100%}，'slow'，function（）{
jQuery（“主菜单”）.css（'display'，'none'）；
jQuery（'#menu_close'）.css（'display'，'none'）；
});
}否则{
jQuery（“主菜单”）.css（'display'，'block'）；
jQuery（“#主菜单”）.animate（{left:'0'}，'slow'，function（））{
jQuery（'#menu_close'）.css（'display'，'block'）；
});
}
});
jQuery（“#菜单_关闭”）。单击（函数（）{
jQuery（“#主菜单”）.animate（{left:'-100%}，'slow'，function（）{
jQuery（“主菜单”）.css（'display'，'none'）；
});
});
callOnResize（）；
});
jQuery（窗口）.resize（函数（）{
callOnResize（）；
});
函数callOnResize（）{
var winwidth=jQuery（window）.width（）；
如果（winwidth<760）{
jQuery（“#主菜单”）.css（{display:'none'}）；
jQuery（'#主菜单'）。动画（{left:'0'}，'slow'）；
}否则如果（winwidth>=760）{
jQuery（“#主菜单”）.css（{display:'block}）；
}
}

它可以在任何具有以下功能的菜单上工作：

<ul id="main_menu">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

项目
项目
项目
项目

---

您在这方面花费的任何时间都将不胜感激。

您的菜单应该在一开始就隐藏起来，看不见。这样做：

 #main_menu{ left: -100%; display: none;}
 #menu_close{ display: none;}  

---

在css中添加媒体规则，如下所示，然后从js中删除callOnResize（）

@media screen and (max-width: 760px) {
    #main_menu {
        display: none;
    }
}

@media screen and (min-width: 761px) {
    #main_menu {
        display: block;
    }
}

作为 您必须从javascript中删除callOnResize（）函数，如下所示：

 <script type="text/javascript">
//mobile menu
jQuery(function() {
    jQuery('#menu_btn').click(function() {
        if(jQuery('#main_menu').is(':visible')) {
            jQuery('#main_menu').animate({ left: '-100%' }, 'slow', function () { 
            jQuery("#main_menu").css('display', 'none');
            jQuery('#menu_close').css('display', 'none');  
        });
    } else {
        jQuery("#main_menu").css('display', 'block');
        jQuery('#main_menu').animate({ left: '0' }, 'slow', function(){
            jQuery('#menu_close').css('display', 'block'); 
        });
    }
});


 jQuery('#menu_close').click(function() {
        jQuery('#main_menu').animate({ left: '-100%' }, 'slow', function () { 
            jQuery("#main_menu").css('display', 'none'); 
        });
    });
});
</script>

---

当我把它添加到这里时，菜单在页面加载时仍然闪烁。想法？首先，你提到的网站被关闭了。现在网站已经开通，但我看不到我的建议得到实施。你没有接受我的回答。来源：第145行和第146行。我取消选择您的答案，因为它在我的网站上不起作用。第145行和第146行是Javascript代码，在调整大小等操作时触发。我建议将默认样式添加到CSS中，使其以隐藏方式开始。修复程序采用style/CSS，而不是JavaScript.hmm。我刚刚将其添加到另一个我正在使用此脚本的网站chinesebloomington.com，但它并没有解决问题。我正在使用的移动菜单代码肯定是超级错误，因为您提出的解决方案不起作用。当我删除callOnResize（）时，菜单会显示，并且永远不会被删除。你是否在头脑中添加了css规则？好的，你的建议奏效了。我将css添加到头文件的头部，并删除了callOnResize（）。但它只在我将媒体查询放在头文件的头部时起作用。当我把它放在css文件中时，它不起作用。对此有何想法？

@media screen and (max-width: 760px) {
 #main_menu {
   display: none;
   }
}

@media screen and (min-width: 761px) {
    #main_menu {
        display: block;
    }
}