Question

我使用 bootstrap 4 alpha 6版 。我的页面中有几个块。我想通过单击主按钮（id ='expand-collapse'）来展开/折叠这些块。此外，每个按钮都有自己的按钮，可以打开/关闭混凝土块。对，知道我使用下一个js代码并且有奇怪的行为。

例如： 我通过单击第一个按钮打开第一个块，然后单击主按钮（id ='expand-collapse'）打开其他块。但事实上，第一块封闭和其他块打开。如何解决这个问题？

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/CLOSE 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/CLOSE 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/CLOSE THIRD</a>
                <div class="collapse block" id="block-3">
                   THIRD BLOCK
                </div>
            </div>

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

JAVASCRIPT：

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

    });
  });
});

Answer 1

这种行为是由数据切换属性引起的。从主按钮取下并将脚本更改为 - HTML

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

JQUERY：

             $(function() {
             var showAll = false;
            $('#expand-collapse').on('click', function() {
              var target = $(this).attr('data-target');
              //console.log('showAll=' + showAll);
              $(target).each(function() {                     
                  if(showAll === false)  {
                        $(this).collapse('show');
                  }
                  else {
                    $(this).collapse('hide');
                  }
              });

              if(showAll === false) {
                  showAll = true;
              }
              else {
                  showAll = false;
              }

              //console.log('showAll=' + showAll);
            });
          });

修复折叠/展开块的行为

1 个答案: