Discussion :

[apdf1]

Bonjour,
Voila j'ai une liste déroulante que je voudrais modifier. En faite cet une liste à deux niveaux que lorsque je passe sur le nom elle s'ouvre vers droite.
J'aimerai si possible la rendre à trois niveaux!

Je vais essayé de m'expliquer
1er niveau j'ai les noms des régions
2éme niveau j'ai les noms des départements par région
3éme niveau les cartes ex: ain_commune, ain_circonscription ect.... jusque là pas trop de problème.

Mon problème est que j'aimerai que lorsque je clique sur une REGION sa s'ouvre vers le bas et que l'ont retrouve les noms des départements de cette région et quand je passe sur un des noms des départements sa s'ouvre vers la droite avec ex: ain_commune, ain_circonscription ect....

Auvergne-Rhône-Alpes
Ain ain_commune
Allier ain_circonscription
Ardèche ect...
Cantal
Drôme
Isère
Loire
Haute-Loire
Bourgogne-Franche-Comté



Je joint un fichier exemple:

Je vous remercie d'avance

Max

[SpaceFrog]

Essaye de structurer tes données sous forme de ul > li imbriquées puis d'affecter des events d'apparition sur le click des li ...

[apdf1]

Bonjour SpaceFrog

Si je fait:

Code HTML :

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

1
2
3
4
5
6
7
8
9
<ul><a href="#">Auvergne-Rhône-Alpes</a>
              <ul>
			<li><a href="#">Ain </a></li>
			<li><a href="#">Allier </a></li>
		       <li><a href="#">Ardèche</a></li>
		       <li><a href="#">Cantal</a></li>
		      <li><a href="#">Drôme</a></li>
		      <li><a href="#">Isère</a></li>
             </ul>

Je n'ai plus qui s'affiche?
J'ai du faire une boulette!!!

Max

[CaptainMind]

Pour faire sa tu peut utiliser bootstrap :

http://jsfiddle.net/0fjsmtc4/
https://getbootstrap.com/

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
 
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
 
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
            <ul>
                <li><a href="" data-toggle="tooltip" data-placement="right" title="Tooltip on right">test</a></li>
            </ul>
      </div>
    </div>
  </div> 
</div>

Code javascript :

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

1
2
3
4
 
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});

EDIT : je te l'ai fait en templating, vanilla javascript :
https://ufile.io/rpkom

[apdf1]

Bonjour CaptainMind

Je te remercie mais je pense pas que sa corresponde à ma demande?

Bonne journée

Max

[SpaceFrog]

Je n'ai plus qui s'affiche?
J'ai du faire une boulette!!!

Tu devais avoir un css ou un js associé à ton code précédent ?