Bootstrap de l'Accordéon à la navigation avec la liste déroulante de l'icône de chevron
J'ai un bootstrap nav-tabs nav-empilés liste qui a besoin d'utiliser l'accordéon à l'effondrement de toutes les listes sauf pour le plus récemment cliqué, ou avec des enfants actifs.
J'ai ce travail quelque peu, mais n'arrive pas à trouver comment obtenir le chevron pour changer de direction, à moins cliqué.
J'avais déjà eu ce seulement mis en place pour faire de l'effondrement, et non pas de l'accordéon effondrement... donc besoin d'un peu de javascript conseils pour obtenir pleinement fonctionnel.
jsfiddle: http://jsfiddle.net/utcwebdev/NBcmh/17/
(utilise des fichiers d'amorce de balisage, ainsi qu'une housse bootswatch thèmes css)
Voici le balisage:
<ul id="sidenav01" class="accordion nav nav-department nav-tabs nav-stacked">
<li>
<a href="department-mathematics.php"><i class="icon-home"></i> Mathematics</a>
</li>
<li>
<a href="#li02" data-toggle='collapse' data-target='#subnav01', data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron-up pull-right"></i>Programs </a>
<ul id="subnav01" class="nav nav-list collapse">
<li><a href="#1"><i class="icon-home"></i> Programs Home</a></li>
<li><a href="#2">Undergraduate Program</a></li>
<li><a href="#3">Graduate Program</a></li>
<li><a href="#4">Undergraduate Program</a></li>
<li><a href="#5">Math Plaza</a></li>
<li><a href="#6">UTeaChattanoga</a></li>
<li><a href="#7">Placement Criteria</a></li>
<li><a href="#8">Step Ahead Math</a></li>
</ul>
</li>
<li>
<a href="#page">A Single Math Page</a>
</li>
<li>
<a href="#li03" data-toggle='collapse' data-target='#subnav02', data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron-up pull-right"></i>Student Resources</a>
<ul id="subnav02" class="nav nav-list collapse">
<li><a href="#pimu">Pi Mu Epsilon</a></li>
<li><a href="#schol">Scholarships and Awards</a></li>
<li><a href="#links">Math Links</a></li>
<li><a href="#advise">Advisement</a></li>
</ul>
</li>
<li>
<a href="directory.php"><i class="icon-group"></i> Staff Profiles</a>
</li>
</ul>
Et voici le javascript:
$(document).on('click', '.accordion-toggle', function(event) {
event.stopPropagation();
var $this = $(this);
var parent = $this.data('parent');
var actives = parent && $(parent).find('.collapse.in');
//From bootstrap itself
if (actives && actives.length) {
hasData = actives.data('collapse');
//if (hasData && hasData.transitioning) return;
actives.collapse('hide');
}
var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7
$(target).collapse('toggle');
});
OriginalL'auteur PlayGod | 2013-03-26
Vous devez vous connecter pour publier un commentaire.
Il semble que bootstrap effondrement plugin pas entièrement mis en œuvre pour les accordéons. Il bascule s'est effondré classe css uniquement pour l'élément cliqué.
UPD
Pour corriger cela, vous avez juste besoin de trouver tous les boutons à bascule et faire de même avec eux:
Et n'oubliez pas d'ajouter
accordion-group
classes.http://jsfiddle.net/NBcmh/29/
OriginalL'auteur sody
Si vous êtes en utilisant la Police Génial 3.2.1, puis dans le css, utilisez la commande suivante pour appeler les modifications:
.collapsed .icon-chevron:before {content: "\f078";}
.icon-chevron:before {content: "\f077";}
OriginalL'auteur webdever
Merci sody. Ici est une solution qui ne nécessite pas de modification de code HTML. Ajouter le suivant js avant var cible:
De crédit en raison d'un développeur sur ce projet.
http://jsfiddle.net/utcwebdev/NBcmh/24/
accordion-group
et ainsi de suite, tous les js travail est fait par bootstrap des plugins. Dans ce cas, il y a un bug dans le bootstrap et un peu de travail est nécessaire. Mais le meilleur choix est d'utiliser bootstrap code existant autant que possible. Ce bug sera corrigé dans un futur proche je crois. Mais il suivra le même style avecaccordion-group
classes.Et si vous ne comptez pas sur
data-parent
attributs, il ne fonctionnera pas pour les sous accordéons. Je viens de mettre à jour la réponse, vous pouvez obtenir le code d'ici à titre d'exemple.Merci pour l'ajout de détails et d'explications. À un certain moment dans le futur, je vais avoir besoin d'ajouter imbriquée accordéons pour plus d'nav éléments... mais probabaly attendre jusqu'à ce que bootstrap bug est écrasé.
OriginalL'auteur PlayGod
Est-il possible d'ajouter un autre niveau de l'accordéon?
J'ai ajouté cette portion de html mais ce n'est pas le montrer.
http://jsfiddle.net/labanino/G3PqR/12/
OriginalL'auteur Labanino
J'ai été bloqué sur un problème similaire, cependant j'ai réussi à trouver la solution pour l'accordéon flèches pour changer, mais je ne peux pas comprendre comment garder active toujours ouverte, tout en étant en mesure de s'effondrer les autres.
OriginalL'auteur user1467439