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

Posted 2023-05-09

【中文标题】我的移动菜单代码在页面加载时首先闪烁菜单，然后隐藏

【英文标题】：My mobile menu code flashes the menu first when page loads, then hides

【发布时间】：2017-06-16 02:36:18

【问题描述】：

我已经在几个站点上使用了这个脚本，并且它已经到了我有这么多站点都存在相同错误的地步，我需要帮助一劳永逸地解决这个问题，所以我不会继续将相同的错误转移到新的生产服务器

我让一个承包商为 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>

它适用于具有以下内容的任何菜单：

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

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

【参考方案1】：

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

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

【讨论】：

当我把它添加到这里 - zachis.it - 页面加载时菜单仍然闪烁。想法？

首先，您提到的网站已关闭。现在该站点已启动，但我没有看到我的建议的实施。而你没有接受我的回答。

view-source:zachis.it - 第 145 和 146 行。我取消选择您的答案，因为它在我的网站上不起作用。

第 145 和 146 行是在调整大小等时触发的 Javascript 代码。我建议将默认样式添加到您的 CSS 中，使其以隐藏状态开始。修复在样式/CSS 中，而不是在 JavaScript 中。

嗯。我刚刚将它添加到另一个网站，我正在使用这个脚本 - chinesebloomington.com - 它并没有解决问题。

【参考方案2】：

作为Allen 说你必须像这样从 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>

只需添加这样的 css 即可根据屏幕大小显示/隐藏菜单：

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


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

【参考方案3】：

在你的 CSS 中添加媒体规则，如下所示，然后从你的 js 中删除 callOnResize()。

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


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

【讨论】：

我用于移动菜单的代码一定是超级错误，因为您提出的这个解决方案不起作用。当我删除 callOnResize() 然后菜单显示并且永远不会被删除。

你脑子里加了css规则吗？

好的，你建议的工作。我将 css 添加到头文件的头部并删除了 callOnResize()。但它仅在我将媒体查询放在头文件的头部时才有效。当我把它放在我的css文件中时它不起作用。对此有什么想法？