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>