jquery - 显示/隐藏 jQuery 脚本无法正确切换元素

Question

我需要 jQuery 脚本:

1. 默认情况下仅显示一个事件 div，其他 div 将隐藏
2. 此时只有一个处于事件状态(如果单击新隐藏的 div -> 它会打开，当前打开的 div 将关闭)

我有一些代码和演示:

HTML

<div class="toggle">Content</div>
<div  class="hidden hide">Content</div>
<div class="toggle">Content</div>
<div  class="hidden show">Content</div>

CSS

.toggle {width:398px; height:48px; cursor: pointer; border: 1px solid #000}
.hidden {width:300px; height:75px; background-color:#333333; margin-left:50px; text-indent:25px;}

.hide {display:none;}
.show {display:block;}

JavaScript

$(document).ready(function() {
    $(".toggle").click(function() {
       $('.active').not(this).toggleClass('active').next('.hidden').slideToggle(300);
       $(this).toggleClass('active').next().slideToggle("fast");
    });
});

http://jsfiddle.net/kolxoznik1/C7W2D/

问题是，当打开新的 div 时，它不会正确关闭以前打开的 div。

Answer 1

使用此代码

$(document).ready(function() {
    $(".toggle").click(function() {
         $(".hidden").hide(); //to hide all
        $(this).next().show(); //to show the one you clicked on

    });
});

在这里查看它的工作http://jsfiddle.net/C7W2D/4/