如何找到并选择特定的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