沒有雙下拉的jQuery點擊事件

Question

我是jQuery的新手。我想通過點擊事件來製作一個簡單的下拉菜單。下面是HTML結構：

<ul id="menubar"> 
     <li class="menu"> 
      <a href="#">Menu 1</a> 
      <ul class="submenubar"> 
       <li class="submenu"><a href="#">Submenu 1</a></li> 
      </ul> 
     </li> 
     <li class="menu"> 
      <a href="#">Menu 2</a> 
      <ul class="submenubar"> 
       <li class="submenu"><a href="#">Submenu 2</a></li> 
      </ul> 
     </li> 
</ul>​ 

我所做的腳本如下：

$(document).ready(function(){ 
      $('li.submenu').hide() 
      $('li.menu').click(function(e){ 
       $(this).find('li.submenu', this).slideToggle('fast'); 
       e.stopPropagation(); 
      }) 
     })​ 

但是下拉是重疊的。這不是我想要的。我想要的全部是： - 如果我點擊菜單1，它將顯示子菜單1.其他菜單和子菜單被隱藏。 - 然後如果我點擊菜單2，子菜單2將顯示爲子菜單1將被隱藏。 - 依此類推...

我該怎麼辦？任何人都可以幫我解決這個問題嗎？感謝您的答覆..

Answer 1

嘿檢查了這一點點擊菜單1將顯示submenu1隱藏其它再次WHNü單擊菜單1然後它會MENU2 WIL b顯示試試這個

http://jsfiddle.net/96xnB/