一次仅一个Active Class和Visible Div

Question

页面上有一堆div元素。

我里面有一个嵌套的div 。

我希望能够向click ed元素添加一个类， .show()子div添加.show() 。

$('.container').on('click', function(){
    $(this).toggleClass('red').children('.insideItem').slideToggle();
});

• 我可以单击它，它会下降。
• 再次单击，它消失了。

因此，现在我需要一些方法，以在除open div以外的任何位置单击时，将slideUp() removeClass()和slideUp() 所有其他方法slideUp() 。 自然，我尝试过这样的事情：

$('html').on('click', function(){
    $('.container').removeClass('red').children('div').slideUp();
});

好吧，这只是阻止效果停留在首位。 我已经阅读了有关event.Propagation()但我已阅读，如果可能的话，应避免使用。

我试图避免使用更多的预构建插件（例如accordion ，因为这应该是一件非常简单的事情，而且我想知道一种使其工作的简单方法。

谁能在这个小提琴上展示一个简单的例子，如何解决这个问题？

• 仅显示一个活动div，如果单击则折叠所有其他div

https://jsfiddle.net/4x1Lsryp/

Answer 1

一种解决方法是使用以下代码更新代码：

1）防止对正方形的点击冒泡至父元素2）确保在任何地方进行新点击时重置所有正方形的状态。

$('.container').on('click', function(){
  $this = $(this);
  $('.container').not($this).removeClass('red').children('div').slideUp();
  $this.toggleClass('red').children('div').slideToggle();
  return false;
});

在此处查看更新的JSfiddle： https ：//jsfiddle.net/pdL0y0xz/

Answer 2

您需要结合两种方法：

 for (var i = 0; i < 10; i++) { $('#wrap').append("<div class='container'>" + i + "<div class='insideDiv'>Inside Stuff</div></div>"); } $('.container').on('click', function() { var hadClassRed = $(this).hasClass('red'); $('.container').removeClass('red').children('div').slideUp(); if (!hadClassRed) { $(this).toggleClass('red').children('div').slideToggle(); } }); 

 .container { width: 200px; height: 200px; float: left; background: gray; margin: 1em; } .insideDiv { display: none; } .red { background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrap"></div>