序列的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。