一次只有一个活动 class 和可见 Div

Question

页面上有一堆 div 个元素。

我在里面有一个嵌套的 div。

我希望能够向 clicked 元素添加 class，并且 .show() 子元素 div。

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

我可以点击它，它会掉下来。
再次点击，它消失了。

所以，现在我需要一些方法来 removeClass() 和 slideUp() 所有其他的 除了开放 div 之外的任何地方。当然，我尝试过这样的事情：

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

好吧，这只是阻止了效果停留在第一位。我在 event.Propagation() 上读过，但我读过应该尽可能避免。

我正在尝试避免使用任何更多预建插件，如 accordion，因为这应该是一件非常简单的事情，我想知道一个简单的方法来让它工作。

谁能举个简单的例子来说明这个fiddle如何解决这个问题？

仅显示一个活动 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>

一次只有一个活动 class 和可见 Div

Only one Active class and Visible Div at a time

javascript

css

jquery

dom

show-hide