jQuery Show One Div和Hide the Others

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个堆叠在一起.

*为清晰起见编辑*

// 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"部分排除被点击的元素.