La difficulté avec multi-niveaux pliable Bootstrap côté-nav menu
J'ai été peignage autour de la recherche d'un exemple de la même problème, je vais avoir mais pas de chance encore. Je suis en train de créer un multi-niveau pliable côté de navigation à l'aide de bootstrap bootstrap.js.
Mon problème est que j'ai ajouté dans le deuxième niveau, mais lorsque je clique sur la liste de l'élément déclencheur pour l'ouvrir, il s'effondre tout le menu. Quand je me suis ré-ouvrir le menu, le menu de second niveau est également ouvert. Mon code est ci-dessous:
<div class="sidebar-nav">
<p class="sidenav-header">Units and Lessons:</p>
<ul class="nav nav-list">
<li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary">
Content Areas
</span>
<ul class="nav nav-list collapse" id="content-areas">
<li><a href="#" title="Title">All</a></li>
<li><a href="#" title="Title">Urban Planning</a></li>
<li><a href="#" title="Title">Sustainability</a></li>
<li><a href="#" title="Title">Public Administration</a></li>
<li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas"><a href="#" title="Title">Health</a>
<ul class="nav-secondary nav-list collapse" id="nav-health">
<li><a href="#" title="Title">Introduction</a></li>
<li><a href="#" title="Title">Lesson: What is Epilepsy?</a></li>
<li><a href="#" title="Title">Lesson: Pathology</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary">
Languages
</span>
<ul class="nav nav-list collapse" id="languages">
<li><a href="#" title="Title">All</a></li>
<li><a href="#" title="Title">Arabic</a></li>
<li><a href="#" title="Title">Turkish</a></li>
<li><a href="#" title="Title">Hebrew</a></li>
</ul>
</li>
</ul>
</div>La section spécifique dont je parle est en vertu de la "Santé" de l'élément de liste sous "éléments de Contenu".
Toute aide est grandement appréciée. Merci!
OriginalL'auteur Jeff W | 2013-09-05
Vous devez vous connecter pour publier un commentaire.
Le problème avec votre balisage, c'est que tout le menu est effondré lorsque vous essayez de cliquer dans la liste. Par exemple, si vous cliquez sur Tout l'intérieur de Zones de Contenu qu'il ne s'effondre les Domaines de Contenu. La même chose se passe pour le menu de second niveau, la Santé dans votre cas.
Cela est dû au fait que vous n'avez pas un accordéon rubrique spécifiée. Jetez un oeil dans Bootstrap Effondrement De La Documentation où vous trouverez un exemple comme ceci:
Une fois que vous spécifiez le titre de votre deuxième niveau de la valeur liquidative devrait fonctionner correctement.
J'ai créé un violon pour vous de vérifier. J'ai modifié le Contenu des Zones selon la La Documentation et le menu de second niveau a bien fonctionné. Cependant, je n'ai pas modifier les Langues des éléments de menu pour que vous puissiez voir comment il agit (essayez de cliquer dans la liste des Langues est élargi)
OriginalL'auteur Pitamber Tiwari
Bien que Similaire à Pitamber exemple je ne voudrais pas ajouter un peu de l'classes supplémentaires, en particulier les extra div avec la classe "accoridan-tête", il suffit d'appliquer cette classe à la un balise ainsi.
Vous pouvez aller plus loin et ajouter la feuille CSS et ou certains JS de placer un peu de contraste sur le sous-menu et aussi pour flip/modifier le signe icône lorsqu'un élément de menu est élargi et s'est effondré.
OriginalL'auteur Ray Faddis