Javascript 一次只能有一个活动类和可见Div

页面上有一堆

div

元素

我有一个嵌套的

div

我希望能够将类添加到

单击
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

一种方法是用以下内容更新代码：

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

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

请参见此处更新的JSFIDLE:
您需要结合两种方法：


for（变量i=0；i<10；i++）{
$（“#wrap”）.append（“+i+”insidestuff”）；
}
$（'.container'）。在（'click'，function（）上{
var hadClassRed=$（this.hasClass（'red'）；
$（'.container'）.removeClass（'red'）.children（'div'）.slideUp（）；
如果（！hadClassRed）{
$（this.toggleClass（'red'）。children（'div'）。slideToggle（）；
}
});
.container{
宽度：200px；
高度：200px；
浮动：左；
背景：灰色；
边缘：1米；
}
.insideDiv{
显示：无；
}
瑞德先生{
背景：红色；
}