本文介绍了jQuery手风琴折叠了兄弟姐妹的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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();

   });
});

现在,当我点击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手风琴折叠了兄弟姐妹的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 02:22