Déroulement d'un liste après un clic sur un lien

**mullger** · 21/08/2007, 08h58

Bonjour,

Je voudrais réaliser une liste qui s'affiche après un clic sur son titre. Exemple :

Fruits

Après avoir cliqué sur Fruits

Fruits
- pommes
- poires
- abricots
- ...

Faut-il que je la réalise en javascript ? Si oui quelqu'un connait-il un site qui pourrait m'aider ?

Merci d'avance !

**LexWizard** · 21/08/2007, 09h12

Tu veux faire un menu, ou c'est juste dans une page ?
Tu peux imaginer un code cimple comme ça :

Code :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Tests</title>
           <script type="text/javascript">
function displayDiv()
{
    if(idFruits.style.display == 'none')
        idFruits.style.display='block';
    else
        idFruits.style.display='none';
}
</script>
</head>
<body>
    <a href="javascript:displayDiv();">Fruits</a>
    <div id="idFruits" style="display:none;">
    -Banane<br />
    -Pommes<br />
    -Poires<br />
    </div>
</body>
</html>

Après biensur il faut de la mise en forme, mais en plus sur le but.

**mullger** · 21/08/2007, 09h20

Merci beaucoup, c'est exactement ce que je voulais et le code est suffisamment simple pr ke je puisse le comprendre !

**LexWizard** · 21/08/2007, 09h25

Parfait alors

Bonne continuation

**mullger** · 21/08/2007, 11h11

Rebonjour,

J'aimerais savoir comment faire pour faire une liste sur pls niveaux. Exemple :
Après click sur Fruits :

Fruits
- pommes
- poires
- abricots

Après click sur abricots :

Fruits
- pommes
- poires
- abricots
- suisse
- italie

Voilà le code que j'ai essayé de réaliser mais qui ne fonctionne pas. Quelqu'un a-t'il une solution ou un conseil ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tests</title>
<script type="text/javascript">
function displayDiv()
{
for(i=1; i<=3 ; i++)
{
if(idFruits+i+.style.display == 'none')
idFruits+i+.style.display='block';
else
idFruits+i+.style.display='none';
}
}
</script>
</head>
<body>
<a href="javascript:displayDiv();">Fruits</a>
<div id="idFruits1" style="display:none;">
<ul>
<li>
<a href="javascript:displayDiv();">Pommes</a>
<div id="idFruits2" style="display:none;">
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div>
</li>
<li>
<a href="javascript:displayDiv();">Poires</a>
<div id="idFruits3" style="display:none;">
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div>
</li>
<li>
<a href="javascript:displayDiv();">Abricots</a>
<div id="idFruits4" style="display:none;">
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>

Merci d'avance,

**LexWizard** · 21/08/2007, 11h23

Juste déjà dans ton code il y a une erreur :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
function displayDiv()
{
    for(i=1; i<=3 ; i++)
    {
    if(document.getElementById("idFruits"+i).style.display == 'none')
        document.getElementById("idFruits"+i).style.display='block';
    else
        document.getElementById("idFruits"+i).style.display='none';
    }
}

Mais tel quel tu cliquera sur n'importe quel liens, ça affichera ou ferra disparaitre tout.
Tu doit donnner un argument à la fonction pour savoir quel div cela concerne.

**LexWizard** · 21/08/2007, 13h33

Tu peux faire comme ça par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
function displayDiv(div)
{
        if(document.getElementById(div).style.display == 'none')
            document.getElementById(div).style.display='block';
       else
            document.getElementById(div).style.display='none';
}
</script>

Code :

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
 
<body>
<a href="javascript:displayDiv('idFruits1');">Fruits</a>
<div id="idFruits1" style="display:none;">
<ul>
<li><a href="javascript:displayDiv('idFruits2');">Pommes</a>
    <div id="idFruits2" style="display:none;">
    <ul>
        <li>France</li>
        <li>Espagne</li>
        <li>...</li>
    </ul>
    </div> 
</li>
<li>
<a href="javascript:displayDiv('idFruits3');">Poires</a>
<div id="idFruits3" style="display:none;"> 
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div>
</li>
<li>
<a href="javascript:displayDiv('idFruits4');">Abricots</a>
<div id="idFruits4" style="display:none;">
<ul>
<li>France</li>
<li>Espagne</li>
<li>...</li>
</ul>
</div> 
</li>
</ul>
</div>
</body>

Déroulement d'un liste après un clic sur un lien

JavaScript

Discussions similaires

Partager

Partager