jQuery Show One Div和Hide the Others

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 
 
 // 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 .not()从“.active”部分中排除被点击的元素，因为点击的元素是“.active”。