Discussion :

[nicoDolly]

Bonjour,
J'ai un petit problème pour garder un menu accordeon ouvert après avoir cliquer sur un lien.
La page html contient 2 div :
- une div pour le menu(qui fonctionne avec jquery)
- une div pour afficher en ajax les pages html ciblée par les liens.
Donc normalement seul la deuxième div est rafraichi. Le menu n'est pas rechargé : le probleme est lorsque que je clic sur un lien, le menu se referme alors que je souhaiterai qu'il reste ouvert sur le lien cliqué

html ( div du menu)

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
 
<div id="MenuS">
                <ul class="menu">
                    <li class="1"><a href ="#">Menu1</a>
                        <ul class="sousMenu">
                            <li> <a href ="lien1.html" id="1">Lien 1</a></li>
                            <li> <a href ="lien2.html" id="1">Lien 2</a></li>
                        </ul>
                    </li>
                    <li class="2"><a href ="#">Menu2</a>
                        <ul class="sousMenu">
                            <li> <a href ="lien3.html" id="2">Lien 3</a></li>
                            <li> <a href ="lien4.html" id="2">Lien 4</a></li>
                        </ul>
                    </li>
                </ul>
 
            </div>

javascript

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
 
$(document).ready( function () {
 
 
    $(".menu .sousMenu").hide();
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
 
    $(".menu li > a").click( function () {
 
 
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next(".menu .sousMenu:visible").length != 0) {
            $(this).next(" .sousMenu").slideUp("normal");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".menu .sousMenu").slideUp("normal");
            $(this).next(" .sousMenu").slideDown("normal");
        }
        return false;
 
    });
} ) ;

J'ai rajouté ce code en pensant garder le menu ouvert aprs le clic mais cela ne fonctionne pas: on dirait que l'id ne passe pas :

Code :

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

1
2
3
4
5
6
7
8
 
$(".sousMenu a").click(function()
   {
       $id=this.id;
       $chaine =".menu ."+1+" .sousMenu" ;
        alert($chaine);
       $($chaine).show();
   }) ;

J'ai également essayé de le rajouter juste après

Code :

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

$(".menu .sousMenu").hide();

mais pas moyen

Quelqu'un a une Idée???

[nicoDolly]

En fait, je viens de trouver 1 solution en modifiant tout le js

HTML (menu 1 et menu 2 ont été déplacé après le </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
 
        <div id="MenuS">
                <ul class="menu">
                    <li class="1"><a href ="#"></a>Menu1
                        <ul class="sousMenu">
                            <li> <a href ="#" id="1">Lien 1</a></li>
                            <li> <a href ="#" id="1">Lien 2</a></li>
                        </ul>
                    </li>
                    <li class="2"><a href ="#"></a>Menu2
                        <ul class="sousMenu">
                            <li> <a href ="#" id="2">Lien 3</a></li>
                            <li> <a href ="#" id="2">Lien 4</a></li>
                        </ul>
                    </li>
                </ul>
          </div>

Js

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
 
$(document).ready( function ()
{
    $(".menu ul ").hide();        //on cache les menus                   
 
 
    $("li:has(ul)").click(function(event)
    {
        if (this == event.target)
        {
            var current = this;
            $(".menu li:has(ul)").each(function()
            {
                if (this != current) $(this).children().slideUp(400);  //on cache les      sous menus qui ne sont pas concernés par le clic
            });
 
            $("ul:first", $(this)).slideToggle(400);  //on affiche le menu racine sur lequel on agit
        }
    });
 
 
 
} ) ;

Voili voilou

[danielhagnoul]

Bonsoir.

Attention :

• un « id » doit être unique !
• les « class » et les « id » doivent commencer par une lettre.

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
<ul class="menu">
	<li class="cl1">
		<a id="li1" href="#">Menu1</a>
		<ul class="sousMenu">
			<li>
				<a id="li10" href="#">Lien 1</a>
			</li>
			<li>
				<a id="li11" href="#">Lien 2</a>
			</li>
		</ul>
	</li>
	<li class="cl2">
		<a id="li2" href="#">Menu2</a>
		<ul class="sousMenu">
			<li>
				<a id="li20" href="#">Lien 3</a>
			</li>
			<li>
				<a id="li21" href="#">Lien 4</a>
			</li>
		</ul>
	</li>
</ul>

Code :

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

1
2
3
4
5
6
7
8
$(function(){
	$(".sousMenu").hide();
 
	$(".menu > li > a").click(function(){
		$(".sousMenu").slideUp("slow");
		$(this).next(".sousMenu").slideDown("slow");
	});
});

[nicoDolly]

Exact:
En fait ,j'ai utilisé des id identiques et des chiffres juste pour rendre le code plus clair à la lecture mais bon, c pas un exemple à suivre, dsl