Question

我有以下代码：

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”。

jQuery Show One Div和Hide the Others

1 个答案: