展開/撤回所有使用.toggle jQuery

Question

我有一堆divs，我單獨使用.toggle展開/縮回，並希望有一個按鈕，將同時展開/收回所有。因此，如果其中一個已經展開/縮回，點擊時它將保持展開/縮回，其餘部分將展開/收回。

這裏是我使用的是什麼對個人的div：

$('.toggle-engine').click(function() { 
    $('.specs-engine').toggle(400); 
$(this).text($(this).text() == '+' ? '-' : '+'); 
return false; 
}); 

試過這種用於展開/收回所有，但如果他們中的一個，當我點擊展開所有已經展開它縮回：

$('.expand-all').click(function() { 
      $('.specs-body').toggle(400) 
    $('.specs-engine').toggle(400) 
    $('.specs-curb').toggle(400) 
    $('.specs-cap').toggle(400) 
    $('.specs-fuel').toggle(400) 
    $('.specs-brakes').toggle(400); 
$(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All'); 
return false; 
}); 

下面是標記：

<a class="expand-all" href="#">+ Expand All</a> 
    <a class="toggle-engine" href="#">+</a> 
    <div class="expand specs-engine"></div> 
    <a class="toggle-body" href="#">+</a> 
    <div class="expand specs-engine"></div> 

Answer 1

您可以使用show或hide而不是toggle強制它展開（顯示）或收回（隱藏）元素。

另外，我建議一個共同的類型設置爲所有.specs-...元素，如specs，因此，例如：

<div class="specs specs-engine"></div> 
<div class="specs specs-curb"></div> 
... etc 

所以JS是：

$('.specs').click(function() {$(this).toggle(400);}); 
$('.expand-all').click(function() { 
    if ($(this).text() == '+ Expand All') 
    $('.specs').show(400); 
    else 
    $('.specs').hide(400); 
    $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All'); 
}); 

編輯：到使個人+/-圖像切換，做類似：

$('.specs').click(function() {$(this).toggle(400);}); 
$('.expand-all').click(function() { 
    if ($(this).text() == '+ Expand All') 
    $('.specs').show(400).find('img.plus, img.minus').hide().filter('img.plus').show(); 
    else 
    $('.specs').hide(400).find('img.plus, img.minus').hide().filter('img.minus').show(); 
    $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All'); 
}); 

EDIT2：如果我理解正確的話：

$('.specs').click(function() {$(this).toggle(400);}); 
$('.expand-all').click(function() { 
    if ($(this).text() == '+ Expand All') 
    $('.specs').show(400).find('.thelink').text('-'); 
    else 
    $('.specs').hide(400).find('.thelink').text('+'); 
    $(this).text($(this).text() == '+ Expand All' ? '- Retract All' : '+ Expand All'); 
}); 

無論如何，你得到它，這是選擇正確的元素，改變其文本的問題。 jQuery爲所有使用該函數調用的元素執行此操作。

Answer 2

你一定要測試是否有正在使用的功能擴展（「：可見」）

if($('.your-div').is(':visible')){ 
    $('.your-div').toggle(); 
}