Comment conserver le sous-menu visible lorsque je clique sur un lien ?

**christophe49** · 18/03/2010, 15h10

Bonjour à tous,
j'ai un petit script qui gère l'affichage d'un sous menu en jQuery.
Est-il possible que lorsque je clique sur le lien d'un sous titre, le sous-menu reste visible.
merci

Vous pouvez voir un exemple à cette adresse :
http://www.delbaretbelda.com/index.php

mon menu est construit comme ceci :

Code :

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

1
2
3
4
5
6
7
8
<ul>
   <li>Titre rubrique
   <ul>
      <li>Sous-titre 1</li>
      <li>Sous-titre 2</li>
   </ul>
   </li>
</ul>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
    $(document).ready(function() {
        var sMenu = "ul.sMenu";
        $(sMenu).hide();
        $("li.btRubrique a").click(function() {
            if($(this).next().is(":visible") == false) {        
                $(sMenu).slideUp();
                $(this).next().slideDown();
            }
        }); 
    });
</script>

**danielhagnoul** · 18/03/2010, 23h03

Bonsoir.

La solution n'est pas triviale, il faut stopper l'événement « click » sur les liens « a.page », créer un événement personnalisé et le traiter.

Exemple :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>		
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family: "Bitstream Vera Serif Bold", serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		.sMenu li {
			width:200px;
			height:60px;
			border:1px solid gray;
		}
	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script>
		$(function(){
			$("#conteneur").bind("changerPage.sMenu", function(event, lienVersPage) {
				alert("L'utilisateur demande la page : " + lienVersPage);
			});
 
			$("ul.sMenu").hide();
 
			$("li.btRubrique a").click(function(event){
				if (!$(this).hasClass("page")){
					if(!$(this).next("ul.sMenu").is(":visible")){
						$("ul.sMenu").slideUp();
						$(this).next("ul.sMenu").slideDown();
					}
				} else {
					//event.preventDefault();  // le lien n'est plus actif !
					$("#conteneur").trigger("changerPage.sMenu", [$(this).attr("href")]);
					return false;	// le lien n'est plus actif et ne se propage plus !
				}
			});
 
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="menu"> 
			<ul>
				<li class="btRubrique">
					<a href="#" title="L'entreprise">L'entreprise</a>
					<ul class="sMenu" >
						<li>
							<a class="page" href="efface11.html" title="efface11">Historique de l'entreprise</a>
						</li>
						<li>
							<a class="page" href="p2712, une invention géniale" title="Savoir">Savoir-faire et moyens</a>
						</li>
					</ul>
				</li>
				<li class="btRubrique">
					<a href="#" title="Panneaux publicitaires">Panneaux publicitaires</a>
					<ul class="sMenu" >
						<li>
							<a class="page" href="p7, introduction" title="Moyen">Vitrines</a>
						</li>
						<li>
							<a class="page" href="p24, l'idée du siècle" title="Génial">Peinture</a>
						</li>
						<li>
							<a class="page" href="http://danielhagnoul.developpez.com/" title="MonCaEx">Mon Cahier d'Exercices sur jQuery &amp; Co</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

Comment conserver le sous-menu visible lorsque je clique sur un lien ?

jQuery

Discussions similaires

Partager

Partager