Correction du comportement des blocs de réduction/expansion

Question

J'utilise bootstrap 4 alpha 6 version. J'ai plusieurs blocs dans ma page. Je veux développer/réduire ces blocs en cliquant sur le bouton principal (id = 'expand-collapse'). De plus, chaque bouton a ses propres boutons qui permettent d'ouvrir/fermer le bloc de béton. Je sais que j'utilise le code js suivant et que j'ai un comportement étrange.

Par exemple: I ouvrir le premier bloc en cliquant premier bouton, puis j'ouvrir d'autres blocs cliquez sur le bouton principal (id = « expansion-effondrement »). Mais en fait, le premier bloc fermé et d'autres blocs ouverts. Comment régler ce problème?

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

Ce genre de comportement est dû à l'attribut-bascule de données. Prenez ce hors du bouton principal et changer le script pour this- 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); 
      }); 
      });