Désactiver onclick sur les enfants de l'élément cliqué
Bonsoir,
Je cherche à créer des listes dépliantes avec un effet amusant. Je propose l'exemple ci-dessous.
Code:
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
| <!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.deplier { list-style-type: '- '; }
.plier { list-style-type: '+ '; }
.deplier ul {
height: 100%;
transition: 0.3s;
}
.plier ul {
height: 1px;
transform: scale(0.1,0.01);
transition: 0.3s;
}
</style>
</head>
<body>
<ul>
<li class="plier">Les jours
<ul>
<li><a href="j1.html">Lundi</a>
<li><a href="j2.html">Mardi</a>
<li><a href="j3.html">Mercredi</a>
<li><a href="j4.html">Jeudi</a>
</ul>
<li class="plier">Les années
<ul>
<li><a href="a1.html">2016</a>
<li><a href="a2.html">2015</a>
</ul>
<li class="plier">Les mois
<ul>
<li><a href="m1.html">Janvier</a>
<li><a href="m2.html">Février</a>
<li><a href="m3.html">Mars</a>
</ul>
</ul>
<script>
plier=function() {
for (var i=0;i<document.getElementsByClassName("plier").length;i++) {
document.getElementsByClassName("plier")[i].addEventListener('click', function() {
this.className="deplier";
deplier();
});
}
};
deplier=function() {
for (var i=0;i<document.getElementsByClassName("deplier").length;i++) {
document.getElementsByClassName("deplier")[i].addEventListener('click', function() {
this.className="plier";
plier();
});
}
};
plier();
</script>
</body>
</html> |
Dans cet exemple, si on clique sur un lien, par exemple sur "mardi", la liste se referme. Or, je voudrais qu'elle reste dépliée, qu'elle ne se replie que si on clique sur "Les jours". J'ai bien trouvé une solution, mais je me demande qu'elle est la bonne façon de procéder, selon vous.
Merci par avance pour vos réponses.
