在jQuery中動畫隱藏/顯示菜單

Question

在菜單上，我想要應用滑動切換或類似於jQuery中默認隱藏li的所有子項的東西。當點擊li時，顯示它是直接的孩子。顯示li的孩子也隱藏了所有其他孩子。

<ul id="navlist"> 
    <li>Information 1<ul> 
     <li>apple1</li> 
     <li>Mango1</li> 
     <li>Banana1</li> 
     </ul> 
    </li> 
    <li>Information 2<ul> 
     <li>apple2</li> 
     <li>Mango2</li> 
     <li>Banana3</li> 
     </ul> 
    </li> 
    <li>Information 3<ul> 
     <li>apple3</li> 
     <li>Mango3</li> 
     <li>Banana3</li> 
     </ul> 
    </li> 

Answer 1

<ul id="MyMenu"> 
    <li> 
    info 1 
    <ul class="inner"> 
     <li>apple1</li> 
     <li>mango1</li> 
     <li>banana1</li> 
    </ul> 
    </li> 
    <li> 
    info 2 
    <ul class="inner"> 
     <li>apple2</li> 
     <li>mango2</li> 
     <li>banana2</li> 
    </ul> 
    </li> 
    <li> 
    info 3 
    <ul class="inner"> 
     <li>apple3</li> 
     <li>mango3</li> 
     <li>banana3</li> 
    </ul> 
    </li> 
</ul> 

$(function(){ 
    $('#MyMenu > li').click(function(){ 
    $('#MyMenu .inner').hide(); //hide all 
    $(this).find('ul.inner').show(); // show the clicked submenu 
    }); 
}); 

Answer 2

lgalSt的回答會爲你工作。但是，您可能想要查看jQuery UI中的Accordion（點擊查看演示），而不是重新發明輪子。它效果很好，jQuery UI適用於所有瀏覽器（你不必擔心IE中不能使用的東西），而且安裝起來很快捷。您還可以主題jQuery UI組件，以便在整個網站中獲得一致的外觀。