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");   

});
});

我有多个<div>的，我的想法是，当我打开 <div>它切换另一个 <div> 。然后，当我单击另一个<div>时，它隐藏了开放的 <div> 。因此只有一个<div>一次开放。

我唯一的问题是，使用这段代码，当我尝试关闭 <div> 时已经打开的，它将关闭然后再次打开。因此一个<div>将永远开放。

如有任何帮助，我们将不胜感激，谢谢。

我添加了下面的 HTML 和 CSS。一切工作正常，只是我无法得到它，因此所有这些都被关闭。

我有 5 个这样的东西，相互堆叠在一个 wrapper 中。

*为了清晰起见进行了编辑*

// 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;}

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”部分中排除单击的元素因为单击的元素是“.active”。