Liste déroulante "en escalier" options qui se superposent

**olivepao** · 26/10/2022, 18h37

Bonjour à tous

Avant toute chose, j'espère que je suis sur le bon forum.

J'ai créé un menu déroulant "en escalier" qui fonctionne à 95%

Le 5% qui me pose problème est le suivant :

Lorsque je passe d'un niveau à l'autre, le niveau précédant ne se ré-enroule pas.

Exemple : je déroule le menu A et il se déroule avec ses sous-menus; si je clique sur le menu B, il se déroule par-dessus le menu A sans que ce dernier ne soit plus visible. Ainsi de suite, tous les menus se superposent, le B par-dessus le A; le C par-dessus le A et le B; le D par-dessus le A, le B et le C.

Je rame depuis 2 jours sans trouver de solutions, Google ne m'a pas aidé.

Je pense que l'instruction e.stopPropagation(); de mon script ne fonctionne pas, mais cela reste encore du domaine de la supposition.

Voici le code

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>
 
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
</head>
 
<body>
 
<div class="container">
<h2> Liste déroulante en escalier </h2>
<div class="dropdown">
<button type = "button" class = "btn btn-success dropdown-toggle" data-toggle = "dropdown" aria-expanded="false" style="width: 165px !important; border-radius: 12px !important;"> Liste
<span class="caret"></span>
</button> 
 
<ul class="dropdown-menu"style ="margin: -35 160 0 !important;">
 
				<!--- **** Niveau N° 1 **** --->
<li>
<a class="test" tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1 <span class="caret"></span></a>
<ul class="dropdown-menu" style ="margin: -115 160 0 !important;">
 
<li>
				<!--- **** Sous-niveau N° 1A **** --->
    <a class="test" tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1A <span class="caret"></span></a>
    <ul class="dropdown-menu" style ="margin: -115 160 0 !important;">
    <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1A-1</a> 
    <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1A-2</a>
    <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1A-3</a> </ul>
 
				<!--- **** Sous-niveau N° 1B **** --->
        <a class="test" tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1B <span class="caret"></span></a>
        <ul class="dropdown-menu" style ="margin: -115 160 0 !important;">
        <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1B-1 </a>
        <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1B-2 </a>
        <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1B-3 </a> </ul>
 
				<!--- **** Sous-niveau N° 1C **** --->
            <a class="test" tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1C <span class="caret"></span></a>
            <ul class="dropdown-menu" style ="margin: -115 160 0 !important;">
            <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1C-1 </a>
            <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1C-2 </a>
            <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1C-3 </a> </ul>
 
				<!--- **** Sous-niveau N° 1D **** --->
                <a class="test" tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1D <span class="caret"></span></a>
                <ul class="dropdown-menu" style ="margin: -115 160 0 !important;">
                <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1D-1 </a>
                <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1D-2 </a>
                <a class="test" tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1D-3 <span class="caret"></span></a>
                <ul class="dropdown-menu"  style ="margin: -90 160 0 !important;">
                <li><a tabindex="-1" href="#" style= "background: Gold !important;">Liste N° 1D-3-1 </a> </ul></ul>
 
                </li> </li> </li>
            </li> </li> </li>
        </li> </li> </li>
    </li>  </li></li>
</li>
</ul> </li>
 
				<!--- **** Niveau N° 2A **** --->
<li>
<a class="test" tabindex="-1" href="#" style= "background: Cyan !important; ">Liste N° 2 <span class="caret"></span></a>
<ul class="dropdown-menu" style ="margin: -115 160 0 !important;">
<li><a tabindex="-1" href="#" style= "background: Cyan !important;">Liste N° 2A-1</a></li>
 
				<!--- **** Sous-niveau N° 2B **** --->
<li>
    <a class="test" tabindex="-1" href="#" style= "background: Cyan !important;">Liste N° 2B <span class="caret"></span></a>
    <ul class="dropdown-menu" style ="margin: -60 160 0 !important;">
    <li><a tabindex="-1" href="#" style= "background: Cyan !important;">Liste N° 2B-1</a>
    <li><a tabindex="-1" href="#" style= "background: Cyan !important;">Liste N° 2B-2</a>
    <li><a tabindex="-1" href="#" style= "background: Cyan !important;">Liste N° 2B-3</a></ul>
 
    </li></li></li>
</ul></li>
 
				<!--- **** Niveau N° 3A + 3B **** --->
<li>
<a class="test" tabindex="-1" href="#" style= "background: Lime !important;">Liste N° 3 <span class="caret"></span></a>
<ul class="dropdown-menu" style ="margin: -115 160 0 !important;">
<li><a tabindex="-1" href="#" style= "background: Lime !important;">Liste N° 3A </a></li>
<li><a tabindex="-1" href="#" style= "background: Lime !important;">Liste N° 3B </a></li>
</ul>
</li>
 
				<!--- **** Niveau N° 4A + 4B **** --->
<li>
<a class="test" tabindex="-1" href="#" style= "background: Yellow !important;">Liste N° 4 <span class="caret"></span></a>
<ul class="dropdown-menu" style ="margin: -115 160 0 !important;">
<li><a tabindex="-1" href="#" style= "background:Yellow !important;">Liste N° 4A </a></li>
<li><a tabindex="-1" href="#" style= "background: Yellow !important;">Liste N° 4B </a></li>
</ul>
</li>
 
</ul>
</div>
</div>
 
<script>
$(document).ready(function()
{
    $(".dropdown a.test").on("click", function(e)
    {
      $(this).next("ul").toggle();
        e.stopPropagation();
        e.preventDefault();
    });
});
</script>
 
</body>
 
</html>

Je vous remercie tous par avance si vous avez une solution à me proposer

Je joints également le fichier (très restreint) en html.

A++ je reviens ASAP

Olivier

Liste déroulante "en escalier" options qui se superposent

jQuery

Discussions similaires

Partager

Partager