jQuery手风琴折叠兄弟姐妹

我自己用jquery为以下html结构编写了一个简单的手风琴菜单：

<ul class="menu">
    <li><a href="#">menu1</a></li>
    <li class="expanded">
        <a href="#">menu2</a>
        <ul class="menu">
            <li><a href="#">menu 2.1</a></li>
            <li><a href="#">menu 2.2</a></li>
            <li><a href="#">menu 2.3</a></li>
        </ul>

    </li>
    <li><a href="#">menu3</a></li>
    <li class="expanded">
        <a href="#">menu4</a>
        <ul class="menu">
            <li><a href="#">menu 4.1</a></li>
            <li><a href="#">menu 4.2</a></li>
        </ul>            
    </li>
    <li class="expanded">
        <a href="#">menu5</a>
        <ul class="menu">
            <li><a href="#">menu 5.1</a></li>
            <li><a href="#">menu 5.2</a></li>
        </ul>            
    </li>  

</ul>

现在，当我单击菜单2时，它将按预期打开，当我单击下一个菜单4时，我希望菜单2和所有打开菜单的其余部分将自动关闭或折叠。我想知道如何实现它

试试看

---

试试这个：

$(function(){

   $('li.expanded > ul').hide();   
   $('li.expanded > a').click(function(){
     $('li.expanded > a').next().slideUp();
     $(this).next().slideToggle();

   });
}); 

试一试

演示：

像这样尝试：

    $(function(){

       $('li.expanded > ul').hide();   
       $('li.expanded > a').click(function(){

         $('li.expanded > ul').not(':hidden').slideToggle();
         $(this).next().slideToggle();


       });
    });

---

这对我来说似乎更容易理解。谢谢。代码运行良好。但是如果我用.slideDown（）替换“.hide（）”。。。。所有子菜单将在第一次单击时一次打开。

$(function () {
    $('li.expanded > ul').hide();
    $('li.expanded > a').click(function () {
        $('li.expanded > ul').not($(this).next()).hide(); //added here
        $(this).next().stop(true, true).slideToggle();
    });
});

$(function(){

   $('li.expanded > ul').hide();   
   $('li.expanded > a').click(function(){
     $('li.expanded > a').next().slideUp();
     $(this).next().slideToggle();

   });
}); 

$(function () {
    var $subs = $('li.expanded > ul').hide();
    $('li.expanded > a').click(function () {
        var $ub = $(this).next().stop(true, true).slideToggle();
        $subs.not($ub).hide();
    });
});

    $(function(){

       $('li.expanded > ul').hide();   
       $('li.expanded > a').click(function(){

         $('li.expanded > ul').not(':hidden').slideToggle();
         $(this).next().slideToggle();


       });
    });