Bootstrap Effondrement De L'Accordéon Par Défaut Expand/Collapse?

Je suis en utilisant Twitter Bootstrap, jQuery.

Selon le bootstrap docs, si vous souhaitez que l'élément pliable ouvrir en tant que par défaut vous ajouter la classe "dans". Et si vous voulez le réductible élément s'est effondré en tant que par défaut vous le style de la hauteur à 0px.

Que tout fonctionne bien et bon.

Je voudrais utiliser une Requête de Média pour définir l'élément ouvrir en tant que par défaut sur de grands écrans, et s'écroula par défaut sur les petits écrans (et puis cliquez sur pour basculer sur les deux)...

Mon code HTML:

<div class="accordion" id="accordion1">
 <div class="accordion-group">
  <div class="accordion-heading">
   Heading text.
   <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
    (Click to show/hide)
   </a>
  </div>
  <div id="collapseOne" class="accordion-body collapse">
   <div class="accordion-inner">
    Lorem ipsum.
   </div>
  </div>
 </div>
</div>

Mon CSS:

@media (min-width: 768px) {
    .collapse {
        height: auto;
    }
}
@media (max-width: 767px) {
    .collapse {
        height: 0px;
    }
}

Cela fonctionne très bien jusqu'à ce que vous commencez à cliquer...

Ci-dessous 767px l'élément est effondré en tant que par défaut, et au-dessus de l'élément est ouvert en tant que par défaut. Correct.

Ci-dessous 767px vous pouvez cliquer sur pour ouvrir l'élément, et il s'ouvre bien. Cliquez à nouveau et il se cache. Rincer et répéter. Correct.

Ci-dessus 767px lorsque vous cliquez sur l'effondrement de l'élément, il se ferme, mais ensuite ré-ouvre lui-même. Cliquez à nouveau et il se ferme et reste fermé à cette heure. Cliquez à nouveau et il s'ouvre bien. Cliquez à nouveau et il se ferme bien.

Pour une raison au-dessus de 767px (lorsque l'élément est ouvert par défaut), il faut deux clics pour qu'il reste s'est effondré, sans ré-ouverture elle-même, et puis il fonctionne très bien.

Pensées?

double possible de Comment puis-je obtenir mon accordéon à la charge avec tous les menus fermé?

OriginalL'auteur Westyfield2 | 2013-09-16

  1. 4

    Vous ne pouvez pas réaliser ce type de comportement avec les Requêtes des Médias comme Twitter Bootstrap Accordéon de recherche pour le .in classe afin de développer/réduire respectifs .accordion-body.

    Une option est de détecter la largeur de la fenêtre de chargement de page, puis ajouter l'utilisation de Bootstrap est .collapse() méthode pour afficher/masquer la .accordion-body.

    $(function(){
    $(window).resize(function() {    //Optional: if you want to detect when the window is resized;
        processBodies($(window).width());
    });
    function processBodies(width) {
        if(width > 768) {
            $('.accordion-body').collapse('show');
        }
        else {
            $('.accordion-body').collapse('hide');
        }
    }
    processBodies($(window).width());
});

    DÉMO: http://jsfiddle.net/grim/z2tNg/

    OriginalL'auteur grim