Question

我用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>

jquery的：

$(function(){

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

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

   });
});

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

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

Answer 1

尝试

fiddle Demo

$('li.expanded > ul').not($(this).next()).hide(); //instead of .hide() you can use .slideDown()

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

Answer 2

试试这个：

$(function(){

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

   });
});

Answer 3

尝试

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

演示：Fiddle

Answer 4

试试这样：

    $(function(){

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

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


       });
    });

jQuery手风琴折叠了兄弟姐妹

4 个答案: