liens sur menu accordeon jquery
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:
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é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 à 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ô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:
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.
