jQuery手风琴折叠了兄弟姐妹 [英] jQuery accordion collapse the siblings

问题描述

I have written a simple accordion menu with jquery myself for the following html structure:

>
< li>< a href =＃> menu1< / a>< / li>
< li class =expanded>
< a href =＃> menu2< / a>
< ul class =menu>
< li>< a href =＃>菜单2.1< / a>< / li>
< li>< a href =＃>菜单2.2< / a>< / li>
< li>< a href =＃>菜单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 =＃>菜单4.1< / a>< / li>
< li>< a href =＃>菜单4.2< / a>< / li>
< / ul>
< / li>
< li class =expanded>
< a href =＃> menu5< / a>
< ul class =menu>
< li>< a href =＃>菜单5.1< / a>< / li>
< li>< a href =＃>菜单5.2< / a>< / li>
< / ul>
< / li>

< / ul>

jquery：

jquery:

$(function(){

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

     $(this).next().slideToggle();

   });
}); 

http://jsfiddle.net/d57Xv/1/

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

Now, when I click on the menu2, it opens as expected, when I click the next menu4, I wish the menu2 and the rest of all the opened menu will automatically close it back or collapse. I wonder how to achieve it.

推荐答案

试试像这样：

Try it like this:

    $(function(){

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

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


       });
    });

这篇关于jQuery手风琴折叠了兄弟姐妹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！