頁面加載隱藏子菜單jquery

Question

我創建了一個包含子菜單的垂直菜單。我使用了一個unorder列表。當我的頁面加載時顯示頂層菜單和子菜單，但是當我點擊最上層時，它會隱藏可以正常工作的子菜單。我希望我的頁面只顯示頂層菜單，只需點擊一下即可顯示子菜單。我對jquery很感興趣，非常感謝你的幫助。

jQuery的

<script type="text/javascript" charset = "utf-8"> 
$(function(){ 

    $('#menu li a').click(function(event){ 
     var elem = $(this).next(); 
     if(elem.is('ul')){ 
      event.preventDefault(); 
      $('#menu ul:visible').not(elem).slideUp(); 
      elem.slideToggle(); 
     } 
    }); 
}); 
</script> 

CSS

<style> 
     #menu 
     { 
      padding:0; 
      margin:0; 
      list-style-type:none; 
      font-size:13px; 
      color:#717171; 
      width:100%; 
     } 

     #menu li 
     { 
      border-bottom:1px solid #eeeeee; 
     } 

     #menu li a:hover 
     { 
      color:White; 
      background-color:#ffcc00; 
     } 

     #menu a:link 
     { 
      color:#717171; 
      text-decoration:none; 
      display:block; 
      padding: 7px 10px; 
     } 

     #menu a:hover 
     { 
      color:White; 
     } 
     #menu li ul 
     { 
      padding:0; 
      margin:0; 
      list-style-type:none; 
      background-color:#999; 
     } 


</style> 

HTML

<ul id="menu"> 
    <li><a href="#">Top Menu 1</a> 
     <ul> 
      <li> 
       <a href="#" target="_parent">Menu 1</a> 
      </li> 
      <li> 
       <a href="#" target="_parent">Menu 2</a> 
      </li> 
       <li> 
       <a href="#" target="_parent">Menu 3</a> 
      </li> 
     </ul> 
    </li> 
</ul> 
<ul id="menu"> 
<li><a href="#">Top Menu 2</a> 
<ul> 
<li> 
<a href="#" target="_parent">Menu 1</a> 
</li> 
</ul> 
</li> 
</ul> 
<ul id="menu"> 
<li><a href="#">Top Menu 3</a> 
<ul> 
<li> 
<a href="#" target="_parent">Menu 1</a> 
</li> 
</ul> 
</li> 
</ul> 
<ul id="menu"> 
<li><a href="#">Top Menu 4</a> 
<ul> 
<li> 
<a href="#" target="_parent">Menu 1</a> 
</li> 
</ul> 
</li> 
</ul> 

Answer 1

css可以做到這一點沒有JavaScript。將ul子菜單設置爲display: none。

#menu li ul 
{ 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    background-color:#999; 
    display: none; 
} 

Demo

Answer 2

隱藏子菜單開始與CSS。

#menu li ul 
{ 
    display: none; /* hide sub uls */ 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    background-color:#999; 
}