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