页面加载隐藏子菜单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; 
}