javascript - 一次只有一个 Active 类和 Visible Div

Question

页面上有一堆div元素。

我在其中嵌套了一个 div。

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

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

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

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

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

好吧，这只是阻止了效果停留在第一位。我已经阅读了有关 event.Propagation() 的内容，但我已经阅读过应该尽可能避免的内容。

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

谁能在这个 fiddle 上展示一个快速示例如何解决这个问题？

• 只显示一个事件的 div，如果点击关闭则折叠所有其他的

https://jsfiddle.net/4x1Lsryp/

Answer 1

解决此问题的一种方法是使用以下内容更新您的代码:

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

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