jQuery显示一个DIV并隐藏其他DIV

Question

我有以下代码：

http://jsfiddle.net/yrM3H/2/

我有以下代码：

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

});
});

我有多个

，我的想法是当我打开一个

时，它会切换到另一个

。然后，当我点击另一个

时，它会隐藏打开的

。因此一次只能打开一个

。

我的唯一问题是，使用这段代码时，当我尝试关闭已经打开的

时，它会关闭然后再次打开。因此，始终会有一个

保持打开状态。

任何帮助都将不胜感激，谢谢。

我在下面添加了HTML和CSS。除了我无法让它们全部关闭之外，一切都正常运作。

我有5个这样的

堆叠在包装器中。

// HTML
<div class="toggle"></div>
<div  class="hidden"></div>

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

- Ando

---

请在您的原帖中添加一些相关的HTML和CSS代码。此外，创建一个JSFiddle将会非常有帮助。 - Sparky

内容已更新，并添加了一个 jfiddle。 - Ando

Answer 1

这将修复它： http://jsfiddle.net/yrM3H/3/

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

你需要使用.not()排除被点击的元素，因为它也属于".active"部分。

- meo