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

Question

My site has a javascript menu that loads before the page is loaded, need help in preventing the menu from being displayed unless clicked on. The header code containing the menu is:

<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>

the javascript code enabling it is..

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

Answer 1

The menu is being rendered faster, than your script gets executed. You need to hide the menu from CSS, so it will stay hidden until your script will attach event listeners.

Here's working example.

 // 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

Instead of hiding them using JQuery use CSS

.menu {
  display:none;
}

And then you can do whatever you were doing before

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