序列的slideToggle多個div

Question

我現在有這種類型的佈局：

+---------------+ 
| hide/show | <-- button 
+---------------+ 
+---+ +---+ +---+ 
| 1 | | 2 | | 3 | <- widgets 
+---+ +---+ +---+ 
+---+ +---+ +---+ 
| 4 | | 5 | | 6 | 
+---+ +---+ +---+ 
+---+ +---+ +---+ 
| 7 | | 8 | | 9 | 
+---+ +---+ +---+ 

在每個插件，我有一個 '關閉按鈕'：

+-------------------------------------------+ 
|          \ /| 
| HEADING        X | <--'close widget' button 
|          /\| 
+-------------------------------------------+ 
|           _/ 
|  CONTENT       ___/ 
|        _______/  
|     __________/              
|    /   
|_________________/       

---

的主要問題

---

我正在使用Jquery的「切換」效果來實現這一點。

但是，大按鈕（Hide/Show）用於隱藏/顯示全部其中。 （所有隱藏，全部示出）

我似乎無法找出如何做到這一點:(

目前我有this jsfiddle顯示如果我關閉了幾個人，並擊中切換所有按鈕，它將關閉其餘的在屏幕上，並顯示一個人的我剛剛關閉（不想要的）。

我想這個按鈕可以根據顯示所有（或隱藏所有）如果

• （ a）他們都隱藏起來，然後顯示所有o （b）如果隱藏了某些內容，則顯示這些內容。 （c）如果全部顯示，則全部隱藏。

我怎樣才能得到這個功能？

---

枝節問題

（想，但不一定需要）

---

在 '秀'，我怎麼可以讓他們先顯示DIV1，然後DIV2，然後DIV3 /等直到所有顯示？ （即按順序切換它們）

Answer 1

由於slideToggle()並不關心每個獨立小部件的狀態，因此您將不得不手動跟蹤所有小部件是否應該打開或關閉 - 從而破壞了使用slideToggle()的目的！

$('#widgetToggle').on('click', function() { 
    var $widgets = $('.widget'); 
    if ($widgets.filter(':visible').length == $widgets.length) { 
     $widgets.slideUp(); 
    } else { 
     showInSequence($widgets.filter(':hidden')); 
    } 
    return false; 
}); 

function showInSequence($el) { 
    if ($el.length) { 
     $el.first().slideDown(function() { 
      showInSequence($el.filter(':hidden')); 
     }); 
    } 
} 

Answer 2

試試這個。

$('#widgetToggle').click(function() { 
    var widgets = $('.widget'), 
     total = widgets.length, 
     visible = widgets.filter(':visible').length, 
     //hide if all are visible 
     method = total === visible ? 'slideUp': 'slideDown', 
     run = function() { 
      var first; 
      if(widgets.length) { //there is something left    
       first = widgets.first(); //save first 
       widgets = widgets.slice(1); //remove processed 
       first[method](run); //show hide 
      } 
     }; 

    run(); 
}); 

Demo。