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

Question

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

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

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

Answer 1

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

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

Answer 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;
    }
}

Answer 3

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

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

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