Question

页面上有许多div个元素。

我有一个嵌套的div。

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

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

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

所以，现在我需要一些方法来removeClass()和slideUp() 其他所有，如果点击除了open div 。当然，我尝试过这样的事情：

$('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>

一次只能有一个Active类和Visible Div

2 个答案: