[BootStrap 4] Menu multi-niveaux

**laurentSc** · 15/07/2019, 23h31

Bonsoir,

souhaitant maîtriser le code, plutôt que prendre un menu multi-niveaux Bootstrap tout fait sur le net, j'essaye d'en fabriquer un à partir de la documentation. Seulement, la doc fournit un menu avec un seul niveau de sous-menu et j'en voudrais 2. Ce que j'ai tenté de faire ne fonctionne pas donc j'ai besoin d'aide (Quand je clique sur l'item du sous-menu 2, au lieu de dérouler le sous-menu (menu de niveau 2), le menu de niveau 1 s'efface...)

https://codepen.io/anon/pen/VJJGEP

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<nav class="navbar navbar-expand-lg navbar-light bg-light">
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
           <ul class="navbar-nav mr-auto">
              <li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
              <li class="nav-item"><a class="dropdown-item" href="#">Another action</a></li>
              <li class="nav-item"><a class="dropdown-item" href="#">Something else here</a></li>
 
              <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown2
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
 
    </ul>
 
  </div>
</nav>