如何找到並選擇特定的div與JavaScript（jquery）

Question

如何寫js應該這樣工作。當用戶存在崩潰 - 全部，找到所有崩潰類並給他們在類。所以結果應該是collapse class plus in class。然後做相反的過程。點擊collapse-all刪除所有在類和剛離開摺疊類。

的情況如下：https://www.dropbox.com/s/rpi3f92v366to4p/img.jpg

這是關於摺疊所有部分在嘰嘰喳喳bootsrap。

！已更新！ 下面是瀏覽器生成的代碼你的建議：

<div class="collapse-all">[<a href="#">alles auklappen/einklappen</a>]</div> 
<div class="background"> 
<div class="collapse-list"> 
    <div class="content-container style999 collapse-group"> 
     <a class="mehr-pfeil" href="#">&nbsp;</a> 
     <h2></h2> 
     <div class="collapse in"> 
     <p></p> 
     <h2>&nbsp;</h2> 
     <p></p> 
     </div> 
    </div> 
    <div class="content-container style999 collapse-group"> 
     <a class="mehr-pfeil" href="#">&nbsp;</a> 
     <h2></h2> 
     <p class="collapse in"></p> 
    </div> 
    <script type="text/javascript"> 
     $('.row .mehr-pfeil').on('click', function (e) { 
      e.preventDefault(); 
      var $this = $(this); 
      var $collapse = $this.closest('.collapse-group').find('.collapse'); 
      $collapse.collapse('toggle'); 
     }); 


     $(".mehr-pfeil").click(function() { 

      if (!$(this).hasClass("mehr-pfeil")) { 
       $(this).addClass("mehr-pfeil-active"); 
      } 
      else { 
       $(this).addClass("mehr-pfeil"); 
      } 
     }); 

     $('.collapse-all').on('click', function (e) { 
     $('.collapse').toggleClass('in'); 
     }); 
    </script> 
</div> 

我也試圖防止類中添加的行動用戶點擊鏈接之前：

$('.collapse-all').on('click', function (e) { 
    event.preventDefault(); 
    $('.collapse').toggleClass('in'); 
}); 

修訂

對於那些會有同樣問題的人，這裏是解決方案：

<script type="text/javascript"> 
    $(document).on('click', '.collapse-all > a', function() { 
     var $collapseList = $(this).closest('#main-content').find('.collapse-list'), 
      $container = $collapseList.find('.collapse').removeAttr('style'); 

     if ($container.filter('.in').length > 0) { 
      $container.removeClass('in'); 
     } else { 
      $container.addClass('in'); 
     } 
    }); 
    $(function() { 
     $('.collapse-all > a').click(); 
    }); 
</script> 

Answer 1

這應做到：

$('.collapse-all').click(function(){ 
    $('.collapse').toggleClass('in'); 
}); 

Answer 2

加入我自己的答案來解決反對我不得不HaukurHaf的，否則精解（這是可能的元素永久不同步）：

$('.collapse-all').click(function(){ 
     var show = false; 
     return function() { 
      show = !show; 
      $('.collapse').toggleClass('in', show); 
     }; 
    }() 
}); 

這將建立一個附加到函數本身的作用域，並在該作用域中放置一個名爲show的變量以保持元素的當前（預期）狀態;

Answer 3

這可以很容易地與jQuery-Toggle

$(document).ready(function(){ 

     $('.collapse-all').on('click', function (e) { 
     $('.collapse').toggleClass('in'); 
     }); 

}) 

Fiddle