如何创建切换或关闭div

Question

我想切换一个内容外的div。我可以显示它，但我不知道如何再次隐藏它，而且我对使用JS和JQ完全陌生。

这是我的小提琴。http://jsfiddle.net/Thelawman/3f9Le/

<div class="action" data-content="#content1">
            About
        </div>
        <div class="content" id="content1">
        Here is my blurb...An amazing blurb<br>
        Blah Blah Blah Blah Blah Blah<br>
        TBlah Blah Blah Blah Blah Blahy<br>
        Blah Blah Blah Blah Blah Blah
        </div>
$("div.action").click (function(){
        var $this = $(this);
        var target = $this.data('content');
        $('div.action').not($this).each(function(){
           var $other = $(this);
           var otherTarget = $other.data('content');
           $(otherTarget).hide();        
        });
        $(target).fadeIn({height: "toggle"}, 1000);
    });

如果有人有比我更干净的代码或更好的方法，我会洗耳恭听。

提前感谢

Answer 1

好的，使用代码

$("div.action").click (function(){
        $("#content1").fadeToggle();
    });

工作小提琴[fiddle][1][1]：http://jsfiddle.net/3f9Le/1/

在这里，当有类操作的DIV被点击时，你会显示，内容如果是第一次，否则在第二次点击隐藏，再次在第三次点击显示，在第四次点击隐藏

在Jquery中试试这个。

$("div.action").click (function(){
if ($(".content").is(":visible")) {
    $(".content").fadeOut("slow");
}
else {
    $(".content").fadeIn("slow");
}
});

要使用data-content属性，请使用以下内容：

$("div.action").click (function(){
        var $this = $(this);
        var target = $this.data('content');
        $(target).fadeToggle(200);
});

http://jsfiddle.net/3f9Le/3/