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

您使用的代码将在bootstrap3中按预期工作，因为处理崩溃的方式（您可以使用JS＆amp; CSS of bootstrap V3验证它）

为了解决您的问题，以下代码段将按预期工作：

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

Answer 2

添加其他声明以处理与要显示的条件不匹配的所有其他情况。试试这个：

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

Bootstrap v4.0.0-alpha.6版本出现错误，转换将在下一版本中解决。

请参阅问题22256并提取21743链接以获取更多信息。

同时展开/折叠几个块？

3 个答案: