Jquery展開收起所有div點擊

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