web-dev-qa-db-fra.com

Bootstrap 3 collapse accordéon: réduit tout fonctionne mais ne peut pas tout développer tout en maintenant data-parent

J'utilise Bootstrap 3 et j'essaye de configurer la structure en accordéon/collapse suivante:

  1. En charge: chaque panneau d'accordéon d'un groupe est entièrement réduit et fonctionne comme prévu/prévu.

  2. Clic de bouton: chaque panneau d'accordéon se développe et le fait de cliquer sur les bascules n'a aucun effet (y compris les effets d'ancrage d'URL).

  3. Un autre clic de bouton: Tous les panneaux reviennent à l'état de chargement; tout s'est effondré et cliquable comme d'habitude.

Je l'ai fait à l'étape 2, mais lorsque je clique à nouveau sur le bouton à l'étape 3, cela n'a aucun effet. Je ne vois également aucune erreur de console signalée dans Chrome Outils de développement ou en exécutant le code via mon JSHint local.

J'aimerais que ce cycle soit répétable chaque fois que l'on clique sur le bouton.

J'ai configuré mon code ici http://bootply.com/9814 et ici http://jsfiddle.net/A9vCx/

J'aimerais savoir ce que je fais de mal et j'apprécie les suggestions. Merci!

Mon HTML:

<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Mon JS:

$(function() {

  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('.collapse-init').on('click', function() {
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $('.panel-title > a').removeAttr('data-toggle');
      $(this).html('Click to enable accordion behavior');
    }
  });

});
jqueryaccordiontwitter-bootstrap-3collapse
21
cfx

Réponse mise à jour

Essayer d’ouvrir plusieurs panneaux d’un contrôle de réduction configuré comme un accordéon, c’est-à-dire avec le data-parent ensemble d'attributs, peut s'avérer assez problématique et problématique (voir la question sur plusieurs panneaux s'ouvrent après avoir ouvert un panneau par programme )

Au lieu de cela, la meilleure approche serait de:

  1. Autoriser chaque panneau à basculer individuellement
  2. Ensuite, appliquez manuellement le comportement de l'accordéon, le cas échéant.

Pour permettre à chaque panneau de basculer individuellement , sur le data-toggle="collapse" élément, définissez le data-target attribut à la .collapse sélecteur d'identifiant de panneau (au lieu de régler le data-parent attribut au contrôle parent. Vous pouvez en savoir plus à ce sujet dans la question Modifiez Twitter Bootstrap pour réduire les accordéons) .

En gros, chaque panneau devrait ressembler à ceci:

<div class="panel panel-default">
   <div class="panel-heading">
         <h4 class="panel-title"
             data-toggle="collapse" 
             data-target="#collapseOne">
             Collapsible Group Item #1
         </h4>
    </div>
    <div id="collapseOne" 
         class="panel-collapse collapse">
        <div class="panel-body"></div>
    </div>
</div>

Pour appliquer manuellement le comportement accordéon , vous pouvez créer un gestionnaire pour l'événement d'affichage collapse qui se produit juste avant l'affichage des panneaux. Utilisez-le pour vous assurer que tous les autres panneaux ouverts sont fermés avant que celui sélectionné ne soit affiché (voir ceci réponse à l'ouverture de plusieurs panneaux ). Vous voudrez également que le code ne s'exécute que lorsque les panneaux sont actifs. Pour faire tout cela, ajoutez le code suivant:

$('#accordion').on('show.bs.collapse', function () {
    if (active) $('#accordion .in').collapse('hide');
});

Ensuite, utilisez show et hide pour modifier la visibilité de chacun des panneaux et data-toggle pour activer et désactiver les contrôles.

$('#collapse-init').click(function () {
    if (active) {
        active = false;
        $('.panel-collapse').collapse('show');
        $('.panel-title').attr('data-toggle', '');
        $(this).text('Enable accordion behavior');
    } else {
        active = true;
        $('.panel-collapse').collapse('hide');
        $('.panel-title').attr('data-toggle', 'collapse');
        $(this).text('Disable accordion behavior');
    }
});

Démo de travail dans jsFiddle

49
KyleMit

Pour une raison quelconque, $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'}); ne semble fonctionner que la première fois et ne fonctionne que pour développer la réduction. (J'ai essayé de commencer avec un dépliant étendu qui ne s'effondrerait pas.)

Il se peut que quelque chose soit exécuté une fois la première fois que vous initialisez l’effondrement avec ces paramètres.

Vous aurez plus de chance en utilisant les méthodes show et hide.

Voici un exemple:

$(function() {

  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('.collapse-init').on('click', function() {
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse('hide');
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse('show');
      $('.panel-title > a').attr('data-toggle','');
      $(this).html('Click to enable accordion behavior');
    }
  });

});

http://bootply.com/98201

Mettre à jour

Accordé KyleMit semble avoir une meilleure façon de gérer cela que moi. Je suis impressionné par sa réponse et sa compréhension.

Je ne comprends pas ce qui se passe ou pourquoi le show semblait basculer à certains endroits.

Mais après avoir déconné pendant un moment .. Enfin venu avec la solution suivante:

$(function() {
  var transition = false;
  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('#accordion').on('show.bs.collapse',function(){
    if($active){
        $('#accordion .in').collapse('hide');
    }
  });

  $('#accordion').on('hidden.bs.collapse',function(){
    if(transition){
        transition = false;
        $('.panel-collapse').collapse('show');
    }
  });

  $('.collapse-init').on('click', function() {
    $('.collapse-init').prop('disabled','true');
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse('hide');
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      if($('.panel-collapse.in').length){
        transition = true;
        $('.panel-collapse.in').collapse('hide');       
      }
      else{
        $('.panel-collapse').collapse('show');
      }
      $('.panel-title > a').attr('data-toggle','');
      $(this).html('Click to enable accordion behavior');
    }
    setTimeout(function(){
        $('.collapse-init').prop('disabled','');
    },800);
  });
});

http://bootply.com/98239

4
Trevor

Pour conserver la nature de l'accordéon intacte lorsque vous souhaitez également utiliser les fonctions 'masquer' et 'afficher' comme .collapse( 'hide' ), vous devez initialiser les panneaux réductibles avec la propriété parent définie dans l'objet avec toggle: false avant de faire un appel à "masquer" ou "afficher"

// initialize collapsible panels
$('#accordion .collapse').collapse({
  toggle: false,
  parent: '#accordion'
});

// show panel one (will collapse others in accordion)
$( '#collapseOne' ).collapse( 'show' );

// show panel two (will collapse others in accordion)
$( '#collapseTwo' ).collapse( 'show' );

// hide panel two (will not collapse/expand others in accordion)
$( '#collapseTwo' ).collapse( 'hide' );
2
mike