SlideToggle按顺序排列多个div

jbutler483 发表于 Dev

but

我目前有这种类型的布局：

+---------------+
|  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，直到全部显示？（即按顺序切换它们）

罗德尼·高尔佩

由于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'));
        });
    }
}