同时展开/折叠几个块？

Question

我的页面中有几个块。我使用 bootstrap 4 alpha 6 版本。我想通过单击一个按钮来展开/折叠这些块。知道我使用下一个 js 代码，它只打开所有块但如何关闭它们？！如何解决这个问题？

HTML：

<div class="card">
   <div class="card-header">
      <button id='expand-collapse' type="button" data-parent="#blocks"  data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">
      </button>
   </div>

   <div class="card-block">
       <div id="blocks">
          <div class="list-group">

             <div class="list-group-item">
                <a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1"OPEN FIRST</a>
                <div class="collapse block" id="block-1">
                   <!--FIRST BLOCK BLOCK-->
                </div>
             </div>

             <div class="list-group-item">
                <a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">OPEN SECOND</a>
                <div class="collapse block" id="block-2">
                   <!--SECOND BLOCK-->
                </div>
            </div>

            <div class="list-group-item">
                <a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">OPEN THIRD</a>
                <div class="collapse block" id="block-3">
                   <!--THIRD BLOCK-->
                </div>
            </div>

         </div>
      </div>
   </div>
</div>

JAVASCRIPT：

$(function() {
  $('#expand-collapse').on('click', function() { // We capture the click event
    var target = $(this).attr('data-target'); // We get teh target element selector
    $(target).each(function() { // Loop through each element
      if ($(this).hasClass('show')) { // Check if it's already visible or not
        $(this).collapse('hide'); // Show and hide accordingly
      } else {
        $(this).collapse('show');
      }

    });
  });
});

$(document).ready(function () {
    $('.collapse')
        .on('shown.bs.collapse', function(event) {
          event.stopPropagation();
            $(this)
                .parent().parent()
                .find(".fa-commenting-o")
                .removeClass("fa-commenting-o")
                .addClass("fa-commenting");
        }).on('hidden.bs.collapse', function(event) {
         event.stopPropagation();
            $(this)
                .parent().parent()
                .find(".fa-commenting")
                .removeClass("fa-commenting")
                .addClass("fa-commenting-o");
        });
});

Answer 1

添加 else 语句以处理所有其他不符合显示条件的情况。试试这个：

$(function () {

       $('#expand-collapse').on('click',function(){
         $('[data-toggle="collapse"]').each(function(){
            var objectID=$(this).attr('data-target');
            if($(objectID).hasClass('.collapse')===false)
            {
                $(objectID).collapse('show');
            } else {
                $(objectID).collapse('hide');
            }
          });
       });
});

Answer 2

Bootstrap v4.0.0-alpha.6 版本存在错误，过渡将在下一个版本中解决。

查看问题 22256 并拉取 21743 链接以获取更多信息。

Answer 3

由于当时处理崩溃的方式，您使用的代码将在 bootstrap3 中按预期工作（您可以使用 bootstrap V3 的 JS 和 CSS 进行验证）

为了解决您的问题，以下 sn-p 将按预期工作：

$(function() {
  $('#expand-collapse').on('click', function() { // We capture the click event
    var target = $(this).attr('data-target'); // We get teh target element selector
    $(target).each(function() { // Loop through each element
      if ($(this).hasClass('show')) { // Check if it's already visible or not
        $(this).collapse('hide'); // Show and hide accordingly
      } else {
        $(this).collapse('show');
      }

    });
  });
});

提示：

我们也可以将toggle 参数传递给collapse 函数并去掉if-else 条件

$(this).collapse('toggle');可以用来代替if-else

但我没有在我的示例中使用它来表明您可以在其中添加额外的计算

工作Fiddle

更新： 更新后的问题要求单独控制该块

为了实现这一点，我们可以使用通过按钮元素触发动作的默认方法。

      <div class="list-group-item">
        <div class="collapse block" id="block-1">
          FIRST BLOCK
        </div>
      </div>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#block-1">
        Block 1
      </button>

您可以在此处找到更新后的jsFidde