Bonsoir,

Je cherche à créer des listes dépliantes avec un effet amusant. Je propose l'exemple ci-dessous.
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
<!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.