javascript菜单在页面加载之前加载

Question

我的网站上有一个javascript菜单，该菜单在加载页面之前即已加载，除非单击该菜单，否则需要帮助以防止其显示。 包含菜单的标题代码为：

<header>
    <div class="logo">
        <a href="index.html"><img src="images/logo.png" alt=""/></a>
    </div>
    <div class="button" id="show">
        <a href="#">Menu <span>+</span> <span style="display:none;">-</span></a>
    </div>
    <div class="clear"></div>

    <nav class="vertical menu">
        <ul>
            <li class="current_page_item0"><a href="docs/home.html">Home</a></li>
            <li><a href="docs/mon.html">Monday</a></li>
            <li><a href="docs/tue.html">Tuesday</a></li>
            <li><a href="docs/wed.html">Wednesday</a></li>
            <li><a href="docs/thur.html">Thursday</a></li>
            <li><a href="docs/fri.html">Friday</a></li>
            <li><a href="docs/sat.html">Saturday</a></li>
            <li><a href="docs/sun.html">Sunday</a></li>
            <li><a href="docs/contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

启用它的JavaScript代码..

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    $('.menu').hide();
    $('#show').click(function (){
        $(".menu").toggle();
        $("span").toggle();
    });
</script>

Answer 1

菜单的渲染速度比脚本的执行速度快。 您需要从CSS隐藏菜单，因此菜单将保持隐藏状态，直到您的脚本将附加事件侦听器为止。

这是工作示例。

 // Wait for DOM to be ready. $(function() { // Keep elements in variables to avoid unnecessary $() calls. var $menu = $('.menu'), $flag = $('span'); // Attach event listener. $('#show').on('click', function() { $menu.toggle(); $flag.toggle(); }); }); 

 /* Hide menu on page load. */ .menu { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <header> <div class="logo"> <a href="index.html"> <img src="images/logo.png" alt="" /> </a> </div> <div class="button" id="show"> <a href="#">Menu <span>+</span> <span style="display:none;">-</span></a> </div> <div class="clear"></div> <nav class="vertical menu"> <ul> <li class="current_page_item0"><a href="docs/home.html">Home</a> </li> <li><a href="docs/mon.html">Monday</a> </li> <li><a href="docs/tue.html">Tuesday</a> </li> <li><a href="docs/wed.html">Wednesday</a> </li> <li><a href="docs/thur.html">Thursday</a> </li> <li><a href="docs/fri.html">Friday</a> </li> <li><a href="docs/sat.html">Saturday</a> </li> <li><a href="docs/sun.html">Sunday</a> </li> <li><a href="docs/contact.html">Contact</a> </li> </ul> </nav> </header> 

Answer 2

与其使用JQuery隐藏它们，不如使用CSS

.menu {
  display:none;
}

然后您可以做之前做的任何事情

    $('#show').click(function (){
        $(".menu").toggle();
        $("span").toggle();
    });