[Bootstrap 4]navbar : n'effacer que le sous-sous-menu

**laurentSc** · 28/04/2019, 23h44

Bonsoir,

pas satisfait par ce que j'ai trouvé sur le web, j'ai entrepris de coder moi-même un menu bootstrap 4 à 2 niveaux. Je n'ai utilisé que la documentation (étonnant, venant de moi, n'est-ce pas Jérôme ?

).

Donc 1), de cette doc, j'ai construit un squelette valable pour toute page bootstrap 4 et 2), j'ai construit un menu à 2 niveaux en me servant du chapitre sur navbar. Cela dit, y a un comportement qui ne me plait pas : quand on a déroulé les 2 niveaux du menu, puis qu'on clique sur l'item du sous-sous-menu, ce que je voudrais, c'est que ça n'efface que le contenu du sous-sous-menu, mais que ça laisse affiché le contenu du sous-menu. Hors bootstrap est fait de telle sorte que ça efface le contenu des 2 niveaux. Quel js rajouter pour obtenir le comportement que je souhaite ?

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--obligatoire pour tout projet bootstrap-->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
 
    <title>Bootstrap menu multi-niveaux squelette</title>
 
    <!-- Bootstrap core CSS (acces au cdn, donc css non chargé mais en ligne) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 
    <!-- Font Awesome (acces au cdn, donc icônes non chargées mais en ligne) -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->
 
   </head>
 
  <body>
 
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <a class="dropdown-item dropdown" href="#"></a>
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Submenu
              </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
                  <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>
 
            </div>
          </li>
        </ul>
      </div>
    </nav> 
 
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 <!-- <script type="text/javascript" src="monscript.js"></script>-->
  </body>
</html>

https://codepen.io/laurentsc/pen/LvaOxy

Invité · 29/04/2019, 13h29

Bonjour Laurent,

Envoyé par laurentSc

...j'ai entrepris de coder moi-même un menu bootstrap 4 à 2 niveaux...

Envoyé par laurentSc

Je n'ai utilisé que la documentation (étonnant, venant de moi, n'est-ce pas Jérôme ?

).

Tu m'en bouches un coin !!

Cela dit... il me semble t'avoir déjà fourni le code d'un menu multi-niveaux * :

https://codepen.io/jreaux62/pen/MRXqLb

Et qui fonctionne bien , en plus !

Compare-le avec ton propre code.
Tu remarqueras que les "dropdown-menu" sont dans des <ul><li>.

* Que j'ai trouvé sur le web ! (et modifié ensuite).

**laurentSc** · 29/04/2019, 20h05

Merci,

j'avais vu ta réponse en début d'après-midi sur mon téléphone, mais parti en vélo (sur du plat ; pas besoin des freins !), mais quand, je suis rentré, coupure d'électricité, donc la télécommande de la porte du garage ne marchait plus et...à la porte. J'ai pu rentrer seulement vers 18h...

Ton menu fonctionne comme je le souhaite.
Par contre, si je l'intègre dans mon code, il ne marche plus. Je dois avoir d'autres js qui le font foirer...

**laurentSc** · 29/04/2019, 23h09

Comme ton menu n'est pas compatible avec mon code, et comme il est très difficile de trouver ce qui coince, j'ai tenté de modifier mon menu en mettant les dropdowm-menu dans des <ul><li> : https://codepen.io/laurentsc/pen/LvaOxy. Le problème reste

Invité · 30/04/2019, 10h25

Bonjour Laurent,

1- comme d'habitude, tu fais tout à l'envers...

Au lieu de partir d'un code QUI FONCTIONNE (et SPÉCIFIQUE Bootstrap 4), tu te remets à bricoler un "truc" qui ne marche pas, en espérant que quelques tours de passe-passe suffiront...

2- COMMENCE par avoir une page CORRECTEMENT CONFIGURÉE !!
Si je reprends le code que tu as donné :

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
<!DOCTYPE html>
<html lang="en">
  <head>
...
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->
 
   </head>
  <body>
...
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 <!-- <script type="text/javascript" src="monscript.js"></script>-->
  </body>
</html>

Tu as 2 FOIS :

4.1.1/js/bootstrap.min.js
4.0.0-beta/js/bootstrap.min.js !!

3.2.1/jquery.min.js
jquery-3.2.1.slim.min.js : c'est pareil !! (sauf que le "slim" est allégé)

3- Quant au script du menu, tu l'as mis où ??
Tu te souviens de ce que je t'ai dit ?

L'ORDRE dans lequel sont déclarés les scripts est IMPORTANT.

Idem dans codepen : il faut déclarer le script Bootstrap APRES le script jQuery.

**laurentSc** · 30/04/2019, 12h11

Bonjour Jérôme,

plutôt que faire marcher mon code, je suis revenu au tien.
Pour éliminer les risques de non-compatibilité, j'ai réduit mon code au minimum.
Je respecte bien l'ordre de déclaration des js : jQuery puis bootstrap puis le script du menu (je l'avais viré de mon essai car y en avait pas)

Le premier sous-menu s'affiche bien quand on clique dessus, mais quand on clique sur le sous-sous-menu, au lieu d'en afficher le contenu, tout disparaît !

[Bootstrap 4]navbar : n'effacer que le sous-sous-menu

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager