javascript - Jquery Expand Collapse all div on Click

Question

我知道这个问题已被问过一千次，但我仍然无法弄清楚。我有一个简单的根据以下this tutorial我正在尝试添加“全部展开/折叠”链接。我找到了一种扩展所有但无法弄清楚如何折叠它们的方法。 slideToggle() 解决方案的问题是，如果我打开一个然后单击链接，它将关闭/打开所有这些，但以前处于事件状态的那个。

我设置了一个 jsFiddle here.

这里是代码的概述:

HTML:

 <h2 class="acc_trigger"><a href="#">Div 1</a></h2>
     <div class="acc_container">
         <div class="block"> Yay content!</div>
</div>
 <h2 class="acc_trigger"><a href="#">Div 2</a></h2>
     <div class="acc_container">
         <div class="block">More Content, Score!</div>
      </div>
<h2 class="acc_trigger"><a href="#">Div 3</a></h2>
     <div class="acc_container">
          <div class="block">Even More Content</div>
     </div>

<a href="#" class="acc_expand-all">Expand/Collapse All </a>

JS:

jQuery(document).ready(function($) {
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers

    //On Click
$('.acc_trigger').click(function(){
            $('.acc_trigger').removeClass('active').next().slideUp(); 
//Remove all "active" state and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown();
        return false; //Prevent the browser jump to the link anchor

});


    $('.acc_expand-all').click(function(){
    //expand all on click

     $('.acc_trigger').addClass('active').next().slideDown();

    return false;


   });
});

Answer 1

您必须检查您的展开/折叠处理程序以查看有多少是打开的，等等，像这样 ( updated fiddle ):

$('.acc_expand-all').click(function(){
    var all = $('.acc_trigger'),
        active = all.filter('.active');

    if (all.length && all.length === active.length) {
        // All open; close them
        all.removeClass('active').next().slideUp();
    }
    else {
        // At least some are closed, open all
        all.not('.active').addClass('active').next().slideDown();
    }

    return false;
});

关于您在评论中的问题，您可以通过检查打开的数量以及点击的是否打开来检查您是否应该处于“独占”模式，例如( updated fiddle ):

$('.acc_trigger').click(function(){
    var $this = $(this),
        thisActive = $this.hasClass('active'),
        active;

    // If this one is active, we always just close it.
    if (thisActive) {
        $this.removeClass('active').next().slideUp();
    }
    else {
        // Is there just one active?
        active = $('.acc_trigger.active');
        if (active.length === 1) {
            // Yes, close it
            active.removeClass('active').next().slideUp();
        }

        // Open this one
        $this.addClass('active').next().slideDown();
    }
});