在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组件，以便在整个网站中获得一致的外观。