jQuery手风琴折叠兄弟姐妹

Posted 2023-02-25

【中文标题】jQuery手风琴折叠兄弟姐妹

【英文标题】：jQuery accordion collapse the siblings

【发布时间】：2013-11-22 06:12:04

【问题描述】：

我自己用 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 时，它会按预期打开，当我单击下一个 menu4 时，我希望 menu2 和所有打开的菜单会自动将其关闭或折叠。我想知道如何实现它。

【参考方案1】：

试试这样：

    $(function()

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

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


       );
    );

【讨论】：

这对我来说似乎更容易理解。谢谢

【参考方案2】：

试试这个：

$(function()

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

   );
); 

【参考方案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

【参考方案4】：

试试

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

【讨论】：

谢谢。代码运行良好。但是，如果我将“.hide() 替换为 .slideDown()” .... 所有子菜单将在第一次单击时同时打开。