如何使用javascript（jquery）查找和选择特定的div

如何编写js，应该是这样工作的。当用户点击“全部折叠”时，找到所有“全部折叠”类，并在“类”中为它们提供。因此，结果应该是崩溃类加上类中的。然后反过来做同样的过程。单击全部折叠移除类中的所有，然后离开折叠类

结构如下：

这是关于折叠twitter 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>

已更新

对于那些有同样问题的人，以下是解决方案：

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

$（文档）。在（'单击'，'）上。折叠所有>a'，函数（）{
var$collapseList=$（this）.closest（“#main content”）.find（“.collapseList”），
$container=$collapseList.find（'.collapse'）.removeAttr（'style'）；
如果（$container.filter（'.in'）。长度>0）{
$container.removeClass（'in'）；
}否则{
$container.addClass（'in'）；
}
});
$（函数（）{
$（'.collapse all>a'）。单击（）；
});

这应该可以做到：

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

---

添加我自己的答案，以解决我对HaukurHaf在其他方面很好的解决方案（元素可能永久不同步）的异议：

---

这将建立一个附加到函数本身的作用域，并在该作用域中放置一个名为

show

的变量，以保持元素的当前（预期）状态

这可以很容易地用

---

从jQuery API开始，有一套类操作方法和示例是的，我已经尝试过了，但找不到解决方案。不幸的是，这个网站的工作方式是，你应该提供显示你的尝试的代码，以及一些html示例，而不仅仅是图像。你的努力将产生有益的反应。好的，谢谢你的洞察力。我以后会照顾你的。早上我将可以访问我的办公室电脑，然后我将粘贴我的代码。@Ninjakornjaca-jquery切换对你不起作用吗？这并不可怕，但如果该类的一个元素被单独“输入”切换，它将永远与其他元素不同步，这不是用户想要的。我试过这样做，但一开始他就给了。崩溃。当用户点击链接时，如何删除那个（in）类，然后给出（in）类？@Malvolio，这当然是真的。要解决这个问题，我想您必须将状态存储在collapseall元素（不管它是否应该对所有元素进行折叠）的数据属性中example@Ninjakornjaca，那么您希望所有元素在开始时都不可见，即使它们在标记中存在.in类？然后，您应该在DocumentReady事件中执行此操作：$（'.collapse'）.removeClass（'in'）；是的，我只想在开始时使用.collapse类，然后当用户单击时，使用.collapse类的所有元素都会进入。我希望你的代码能起作用。谢谢在什么情况下会发生这种情况？@hitesh——你是说，它们怎么会不同步？公司另一部分的某个人编写了一个函数来打开或关闭某个特定部分。

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

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

$(document).ready(function(){

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

})