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 ）用於隱藏/顯示所有這些按鈕。 （全部隱藏，全部顯示）

我似乎無法解決如何做到這一點:(

目前我有這個jsfiddle顯示，如果我關閉了其中的幾個，然后單擊“全部切換”按鈕，它將關閉屏幕上的其余按鈕，並顯示我剛剛關閉的那個（不需要）。

我希望此按鈕顯示全部（或全部隱藏），具體取決於是否

• （a）全部隱藏，然后全部顯示或

• （b）如果有些隱藏，則顯示它們。

• （c）如果全部顯示，則全部隱藏。

如何獲得此功能？

---

附帶問題

（希望但不一定需要）

---

在“ show”上，如何讓他們先顯示div1，然后顯示div2，再顯示div3 / etc，直到全部顯示？ （即按順序切換它們）

Answer 1

由於slideToggle()並不關心每個小部件的狀態，因此您將不得不手動跟蹤所有小部件是否應該打開或關閉-從而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();
 });

演示