一次僅一個Active Class和Visible Div

Question

頁面上有一堆div元素。

我里面有一個嵌套的div 。

我希望能夠向click ed元素添加一個類， .show()子div添加.show() 。

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

• 我可以單擊它，它會下降。
• 再次單擊，它消失了。

因此，現在我需要一些方法，以在除open div以外的任何位置單擊時，將slideUp() removeClass()和slideUp() 所有其他方法slideUp() 。 自然，我嘗試過這樣的事情：

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