崩壊/展開ブロックの動作を修正しました

Question

私はブートストラップ4アルファ6バージョンを使用します。私は私のページにいくつかのブロックを持っています。メインボタン（id = 'expand-collapse'）をクリックしてこれらのブロックを展開/折りたたみたい。また、すべてのボタンにはコンクリートブロックを開閉するボタンがあります。右は私が次のjsコードを使用し、奇妙な動作を知っている。例えば

： Iは、最初のボタンをクリックすることにより、最初のブロックを開き、その後、私は他のブロックを開くために、メインボタン（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

行動のその種類は、データトグル属性によるものです。タイプミスが最初のブロックのためにここにタグであり

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