一次只有一个 Active 类和 Visible Div答案

【问题标题】：Only one Active class and Visible Div at a time一次只有一个 Active 类和 Visible Div
【发布时间】：2016-02-23 23:13:26
【问题描述】：

页面上有一堆div元素。

我在其中有一个嵌套的div。

我希望能够向 clicked 元素和 .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，因为这应该是一件很容易完成的事情，我想知道一种让它工作的简单方法。

有人能在这个小提琴上展示一个快速示例如何解决这个问题吗？

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

https://jsfiddle.net/4x1Lsryp/

【问题讨论】：

标签： javascript jquery css dom show-hide

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：