jQuery 如何切换多个 div 的显示/隐藏？

Question

我有四个div，分别为a b c d，使用Jquery的toggle打开和关闭，每个div都可以自己关闭。

还有一个按钮可以全部打开或关闭。

但是，如果用户首先点击'b'，然后再点击'close all'按钮，则会变成a、c、d关闭，b打开。是否有一种方法可以使一个按钮在hide之后更改为show的功能？

http://jsfiddle.net/vyPHZ/

$(document).ready(function(){

    $(".toggle").click(function(){$(this).next("div").slideToggle(300);});

    $("#collapse").click(       
        function(){
            $(".content").toggle(); 
        }
    );  
});

- user2178521

---

如果 b 是关闭的，而你点击了“全部”按钮，你希望发生什么？应该全部打开还是关闭？如果它们都关闭了，但有一个是打开的呢？ - Sean Redmond

Answer 1

http://jsfiddle.net/vyPHZ/2/

$(".toggle").click(function () {
    $(this).next(".content").slideToggle(300);
});

var io = 0;
$("#collapse").click(function () {       
    $(".content")[io++%2?'show':'hide']();
});

同时，如果您愿意，可以使用'slideDown':'slideUp'代替'show':'hide'。http://jsfiddle.net/vyPHZ/3/

- Roko C. Buljan

Answer 2

你可以为$.content的状态使用一个额外的类，然后在决定隐藏或显示时进行检查： http://jsfiddle.net/vyPHZ/1/

- Hieu Nguyen