Question

我在几个网站上都使用过这个脚本，而且我已经有了很多网站都有这个相同的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>

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

<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

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

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

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

Answer 3

作为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 个答案: