Twitter bootstrap: ajout d'une classe à l'open d'accordéon titre
Je suis un jquery/javascript débutant. Ce que je veux faire est d'ajouter une classe à l'open d'accordéon titre, et l'enlever quand j'ai ouvert l'autre.
voici le code:
<div class="accordion" data-collapse-type="manual" id="parent">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle category" data-toggle="collapse" data-parent="#parent" href="#category1">Category 1
</a>
</div><!--/accordion-heading-->
<div id="category1" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink"><a href="">Open Link 1</a></li>
<li id="" class="sidelink"><a href="">Open Link 2</a></li>
<li id="" class="sidelink"><a href="">Open Link 3</a></li>
</ul>
</div><!--/category1-->
</div><!--/accordion-group-->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle category" href="#Category2">Category 2</a>
</div><!--/accordion-heading-->
</div><!--/accordion-group-->
</div><!--/accordion-->
Les scripts que j'ai attaché avec la page sont
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tools.min.js"></script>
Donc ce que je cherchais à ajouter les .active classe à un.accordion-toggle chaque fois que le menu est ouvert (style accordéon), puis la faire disparaître une fois que l'autre est sélectionné. J'ai regardé la documentation de bootstrap ici, mais il ne semble pas m'aider beaucoup (car je ne sais pas quoi faire avec le
$('#myCollapsible').sur('hidden', function () { //faire quelque chose... })
ou où le placer) j'ai aussi essayé le .addClass() jquery additionneur, mais je n'ai pu avoir la version javascript document.getElementById("accordéon-titre").className += "newClass"; de travail (si j'ai donné l'accordéon groupe d'un titre d'identité, mais dans ce cas il y aura plusieurs groupes d'accordéons) quand j'ai mis le script juste après la couche div.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser l'Effondrement des événements pour cela.
Voici un JsFiddle http://jsfiddle.net/D2RLR/251/
Voici ma solution à ce problème. Basé sur certains des grands des réponses ci-dessus, mais adapté pour travailler avec Bootstrap 3.1.x
$('#accordion .collapse.in').prev('.panel-heading').addClass('active');
avant que la fonction de sorte que la classe peut être ajouté sur le chargement de la page.J'étais également à la Recherche d'ajouter un "actif" de la classe ou similaire, mais j'ai remarqué au cours de l'inspection que lorsqu'il est inactif tous les liens ont une classe de "effondré" qui est supprimé lors de l'onglet/link est sélectionné, donc j'ai simplement tageted l'onglet sans le "effondré" de la classe.
J'ai essayé de Michael D. Irizarry la solution mais cela ne fonctionne pas pour moi.
Donc, je suis venu avec mon propre code:
Si l'accordéon-rubrique déjà de ne pas avoir une classe d'actifs, tous accordéon-titres & les organes de perdre la classe active, et celui qui a été cliqué et il est correspondant de la balise body obtiendrez la classe ajoutée.
Si elle a déjà la classe active (donc si il est déjà ouvert et cliqué), puis la classe active est supprimé et rien ne se passe.
vérifier simplement l'effondrement de la classe ajoutée par la BS Code:
Je pense que c'est la façon la plus simple jusqu'à présent.
Je pense que ça pourrait fonctionner si vous mettez cela sur votre javascript:
actif de classe ne donne pas l'élément, car en moins de fichiers cette classe changé
vous devez donner css au lieu de la classe.
ce code est le mieux et vous pouvez ajouter un autre css que vous
Cela fonctionne pour moi, à l'aide de Bootstrap 3.3.6,
https://jsfiddle.net/u2ay67Lo/6/
HTML
JavaScript
CSS
Besoins:
jquery.min.js, jquery.min.js, bootstrap.min.css, bootstrap-theme.min.css et bootstrap.min.js
Ce qui fonctionne pour moi..