主要问题

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显示我是否关闭其中几个，然后按下切换按钮，它将关闭屏幕上的其余按钮，并显示我刚刚关闭（不想要）的那个。 / p>

我希望此按钮显示所有（或隐藏全部），具体取决于是否

（a）它们都是隐藏的，然后显示全部或



（b）如果隐藏了一些，则显示它们。



（c）如果全部显示，则隐藏所有。

如何获得此功能？

边问题

（想要但不一定要求）

在'show'上，我怎样才能让他们首先显示div1，然后是div2，然后是div3 / etc直到显示出来？（即按顺序切换它们）

Answer 1

由于slideToggle()并不关心每个小部件的状态，因此您必须手动跟踪所有小部件是应该打开还是关闭 - 从而无法使用{{{ 1}}！

slideToggle()

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

按顺序滑动多个div

主要问题

边问题

2 个答案: