修复塌陷/扩展块的行为

Question

我使用引导4 alpha 6版本的。我的页面上有几个街区。我希望通过单击main按钮(id=‘展开-折叠’)展开/折叠这些块。此外，每个按钮都有自己的单独按钮，可以打开/关闭混凝土块。正确地知道，我使用下一个js代码，并有奇怪的行为。

例如：I通过单击第一个按钮打开第一个块，然后单击main按钮(id=‘展开-折叠’)来打开其他块。但事实上，第一街区关闭，其他街区开放。如何解决这个问题？

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);
            });
          });