liens sur menu accordeon jquery

**lamiecahuete** · 24/05/2011, 11h46

Bonjour à vous,

Je ne suis pas experte en dev. et je vais avoir besoin d'un petit coup de main car je sèche depuis hier sur un problème de code.

Voila mon code HTML dans lequel se trouve ma liste destiné à mon menu vertical :

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scriptbreaker-multiple-accordion-1.js"></script>
 
<script language="JavaScript">
 
$(document).ready(function() {
	$(".topnav").accordion({
		accordion:true,
		speed: 500,
		closedSign: '[+]',
		openedSign: '[-]'
	});
});
 
</script>
 
</head>
<body>
 
<ul class="topnav">
	<img class="titleverticalmenu" src="images/title_menueaudouce.png" alt="Eau douce"/>
	<li><a href="index_fr.php" target="scriptbreaker">Home</a></li>
	<li><a href="#">Additifs</a>
		<ul>
			 <li><a href="#">Bio-Degradeur</a></li>
		</ul>
	</li>
 
	<li><a href="#">Chauffage</a>
		<ul>
			 <li><a href="#">Newatt Pro</a></li>
			 <li><a href="#">Newattino</a></li>
			 <li><a href="#">Visi-Therm</a></li>
			 <li><a href="#">Eco-Therm</a></li>
		</ul>
	</li>
 
	<li><a href="#">Pompes</a>
		<ul>
			 <li><a href="#">Micro-Jet</a></li>
			 <li><a href="#">Mini-Jet</a></li>
			 <li><a href="#">Maxi-Jet</a></li>
			 <li><a href="#">Maxi-Jet PH</a></li>
			 <li><a href="#">New-Jet</a>
				<ul>
					<li><a href="#">NJ 400-600</a></li>
					<li><a href="#">NJ 800-1200</a></li>
					<li><a href="#">NJ 1700-2300-3000</a></li>
					<li><a href="#">NJ 4500-6000-8000</a></li>
				</ul>
			</li>
			 <li><a href="#">Newave</a></li>
		</ul>
	</li>
 
	<li><a href="#">Filtres</a>
		<ul>
			 <li><a href="#">Micro-Jet Filter</a></li>
			 <li><a href="#">Duetto</a></li>
			 <li><a href="#">Cobra</a></li>
			 <li><a href="#">Cartouches Newaqua</a>
				<ul>
					<li><a href="#">Diamante</a></li>
					<li><a href="#">Diamante Plus</a></li>
					<li><a href="#">Algo Prevent</a></li>
					<li><a href="#">Algo Out</a></li>
				</ul>
			</li>
			 <li><a href="#">Millennium</a></li>
			 <li><a href="#">Mira-Filters</a></li>
		</ul>
	</li>
 
	<li><a href="#">Mat&eacute;riel de filtration</a>
		<ul>
			 <li><a href="#">Fibre</a></li>
			 <li><a href="#">Epoonge Kinshy</a></li>
			 <li><a href="#">Microceramic</a></li>
			 <li><a href="#">Ceramic HI-Q</a></li>
			 <li><a href="#">Bioglobe</a></li>
			 <li><a href="#">Carbo-Active</a>
				<ul>
					<li><a href="#">Carbo-Active Pellets</a></li>
					<li><a href="#">Carbo-Active granules</a></li>
					<li><a href="#">Carbo-Active mixture</a></li>
				</ul>
			</li>
			 <li><a href="#">Active-Zeolite</a></li>
			 <li><a href="#">Anti-Nitrate</a></li>
			 <li><a href="#">Anti-Phosphate</a></li>
		</ul>
	</li>
 
	<li><a href="#">Accessoires</a>
		<ul>
			 <li><a href="#">Pompe &agrave; air</a>
			 	<ul>
			 		<li><a href="#">Newair</a></li>
			 	</ul>
			 </li>
			 <li><a href="#">Entretien</a>
			 	<ul>
			 		<li><a href="#">Power Gravel Cleaner</a></li>
			 	</ul>
			 </li>
			 <li><a href="#">Eclairage</a>
				<ul>
					<li><a href="#">Visi-Lux</a></li>
					<li><a href="#">Visi-Lux Caps</a></li>
					<li><a href="#">Visi-Lux E</a></li>
				</ul>
			</li>
			 <li><a href="#">Contr&ocirc;le</a>
			 	<ul>
			 		<li><a href="#">Natural Wave</a></li>
			 	</ul>
			 </li>
		</ul>
	</li>
 
	<li><a href="#">Aquariums</a>
		<ul>
			 <li><a href="#">Aquariums en verre</a>
				<ul>
					<li><a href="#">Mirabello 30</a></li>
					<li><a href="#">Mirabello 60</a></li>
					<li><a href="#">Parana 45</a></li>
					<li><a href="#">Parana 60</a></li>
					<li><a href="#">Malibu 40</a></li>
					<li><a href="#">Malibu 60</a></li>
					<li><a href="#">Arlecchino</a></li>
				</ul>
			</li>
			<li><a href="#">Aquariums en plastique</a>
				<ul>
					<li><a href="#">Veliero</a></li>
					<li><a href="#">Travel-Box</a></li>
					<li><a href="#">Box Acquario</a></li>
				</ul>
			</li>
			<li><a href="#">Aquariums boule</a>
				<ul>
					<li><a href="#">Bohemia</a></li>
				</ul>
			</li> 
		</ul>
	</li>
 
	<li><a href="#" target="_blank">Contact</a></li>
 
</ul>
 
</body>

voila le code du fichier .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
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
 
/*
 * jQuery UI Multilevel Accordion v.1
 * 
 * Copyright (c) 2011 Pieter Pareit
 *
 * http://www.scriptbreaker.com
 *
 */
 
//plugin definition
(function($){
    $.fn.extend({
 
    //pass the options variable to the function
    accordion: function(options) {
 
		var defaults = {
			accordion: 'true',
			speed: 300,
			closedSign: '[+]',
			openedSign: '[-]'
		};
 
		// Extend our default options with those provided.
		var opts = $.extend(defaults, options);
		//Assign current element to variable, in this case is UL element
 		var $this = $(this);
 
 		//add a mark [+] to a multilevel menu
 		$this.find("li").each(function() {
 			if($(this).find("ul").size() != 0){
 				//add the multilevel sign next to the link
 				$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
 
 				//avoid jumping to the top of the page when the href is an #
 				if($(this).find("a:first").attr('href') == "#"){
 		  			$(this).find("a:first").click(function(){return false;});
 		  		}
 			}
 		});
 
 		//open active level
 		$this.find("li.active").each(function() {
 			$(this).parents("ul").slideDown(opts.speed);
 			$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
 		});
 
  		$this.find("li a").click(function() {
  			if($(this).parent().find("ul").size() != 0){
  				if(opts.accordion){
  					//Do nothing when the list is open
  					if(!$(this).parent().find("ul").is(':visible')){
  						parents = $(this).parent().parents("ul");
  						visible = $this.find("ul:visible");
  						visible.each(function(visibleIndex){
  							var close = true;
  							parents.each(function(parentIndex){
  								if(parents[parentIndex] == visible[visibleIndex]){
  									close = false;
  									return false;
  								}
  							});
  							if(close){
  								if($(this).parent().find("ul") != visible[visibleIndex]){
  									$(visible[visibleIndex]).slideUp(opts.speed, function(){
  										$(this).parent("li").find("span:first").html(opts.closedSign);
  									});
 
  								}
  							}
  						});
  					}
  				}
  				if($(this).parent().find("ul:first").is(":visible")){
  					$(this).parent().find("ul:first").slideUp(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
  					});
 
 
  				}else{
  					$(this).parent().find("ul:first").slideDown(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
  					});
  				}
  			}
  		});
    }
});
})(jQuery);

C'est un menu accordeon avec un petit effet sympa voir ici le site de l'editeur
Lorsque j'intègre un lien sur l'une des rubriques principales (par exemple : Filtres) dans mon <a href="">, cette rubrique en question ne déroule plus et je n'ai plus accès aux sous-rubriques de celle-ci mais uniquement au lien que j'ai indiqué...
Que puis-je faire?? help... je n'arrive plus à réfléchir et peut être que la réponse est évidente!

Merci d'avance.

**llaffont** · 24/05/2011, 14h21

Salut,

Après plusieurs relecture j'ai enfin compris ton problème.

Une rubrique principale ne peut se voir affecter une URL sans poser de problème d'ouverture d'arborescence.

Je vais tenter de t'aider, mais avant tout j'ai besoin de savoir comment tu ouvres une URL le plus bas dans une de tes arborescences, disons "Cobra" dans filtre

.

**lamiecahuete** · 24/05/2011, 15h04

Salut et merci pour ta réponse!

j'esperais en fait au fond de moi qu'il y ai une solution pour affecter un lien mais en simultané activer l'ouverture de l'arbo.
Pour les URL au plus bas, pour en effet, par exemple Cobra, cela ne posera pas de problème je pense si je place un lien dans ma balise <a href> puisque cette rubrique ne comporte pas de sous-rubriques.

mise en situ. de ce fameux menu
Le but est que si tu clic sur Filtres, l'arbo se développe pour afficher dans le menu les différents modèles et à sa droite, l'overview de tous les filtres s'affichent

Quoi qu'il en soit, si ca ne fonctionne pas, la seule solution est de zapper ces liens, je n'aurais du coup pas de pages d'overview... mais uniquement mes pages produits... HELP!

je sais plus...! O_x

Est ce que les fichiers sources en pj peuvent aider?

**llaffont** · 24/05/2011, 15h17

Ma crainte par rapport à ce menu c'est que lorsque quelqu'un clique sur un lien cela recharge ta page complète pour afficher le contenu de ton lien et par la même occasion faire un reset de ton menu.

Si l'on test une URL directement sur une rubrique principale on voit que le menu se développe mais la page est rechargée avant qu'il n'est terminé de s'ouvrir.

Actuellement sur ton site tu n'a pas mis les liens en production donc on ne peu pas le constater

**Bovino** · 24/05/2011, 15h37

j'esperais en fait au fond de moi qu'il y ai une solution pour affecter un lien mais en simultané activer l'ouverture de l'arbo.

Donc en gros, tu veux aller sur une autre page tout en restant sur la même page, c'est ça ?

**llaffont** · 24/05/2011, 15h41

Pour peaufiner ce menu il faudrait rajouter deux-trois fonctions.

Une qui ajoute une classe "Actived" sur un élément cliquer.
Une seconde qui vérifie qu'un seul élément dispose de la classe "Actived" dans le menu
Une troisième qui déroule le menu ou l'on trouve la classe "Actived"

**llaffont** · 24/05/2011, 15h57

Envoyé par llaffont

Pour peaufiner ce menu il faudrait rajouter deux-trois fonctions.

Une qui ajoute une classe "Actived" sur un élément cliquer.
Une seconde qui vérifie qu'un seul élément dispose de la classe "Actived" dans le menu
Une troisième qui déroule le menu ou l'on trouve la classe "Actived"

Je suis con par moment j'ai pas regardé le code correctement.

en faite la solution est dans l'Ajax.
Il faut quand un lien est cliqué reconstruire ton menu en injectant

Code :

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