Sources : Multilevel dropdown menus with Bootstrap 3.x.
A partir de la version 3.0 de Bootstrap, les menu-déroulants multi-niveaux ne sont plus supportés pour les barres de navigation. Ce bout de code jQuery empêche Bootstrap de switcher les classes « .open » une fois passé le 1er niveau de dropdown.
/**
* NAME: Bootstrap 3 Triple Nested Sub-Menus
* This script will active Triple level multi drop-down menus in Bootstrap 3.*
*/
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// Re-add .open to parent sub-menu item
$(this).parent().addClass('open');
$(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});
Attention à bien respecter le markup Bootstrap :
- la classe .dropdown sur les éléments parents des liens,
- la classe .dropdown-toggle et l’attribut data-toggle= »dropdown » sur les liens,
- les attributs role= »menu » aria-labelledby= »dLabel » sur les balises de listes imbriquées (ul)
<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown">
<a data-toggle="dropdown" href="#">sous-niveau</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</li>
</ul>
</div>