Menu slideDown permetant le clic sur un sous menu
Bonjour,
J'aimerais faire en sorte de pouvoir afficher un sous-menu en cliquant sur une partie d'un menu (ceci fonctionne) mais je voudrais cependant pouvoir cliquer sur les parties du sous-menu pour afficher du texte.
J'ai des listes de sous-catégories (ici nommées sections) englobées dans une liste de catégories.
Voici mon code :
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
| <ul id="sidebar">
<?php
//Pour chaque catégories de $categories
foreach ($categories as $category):
?>
<li>
<h2>
<?php
//On affiche le nom de la catégorie
echo $category['Category']['name'];
?>
</h2>
<ul id="section">
<?php
//On récupère l'id de la catégorie en cours
$id = (string)$category['Category']['id'];
//On appelle la fonction pour trouver les sections de cette catégorie
$section = $this->requestAction(array('controller' => 'Categories',
'action' => 'getSection', $id ));
//Pour chaque sections de celles qui ont été trouvée
foreach ($section as $sec) :
?>
<li id="<?php echo $sec['Section']['id'];?>">
<h3>
<?php
//On affiche le nom de la section
echo $sec['Section']['name'];
?>
</h3>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</ul> |
Avec mon code javascript (JQuery) j'applique un effet de slideDown lors du clic sur une catégorie, ce qui à pour effet de rendre visible les sections de cette catégorie.
Voici le code javascript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $(document).ready(function() {
$('#sidebar li').click(function(){
var section = $(this).children('ul');
if(section.is(':hidden')){
section.slideDown('500');
}
else {
section.slideUp('300');
}
})
}) |
Maintenant mon problème est que quand les sections sont dévoilées et quand je clic sur l'une d'elles, cela referme la div et donc ça me cache les sections. Donc mon objectif est de rendre l’événement réalisable que lorsque je clic sur le nom de la catégorie et non sur le "li". Je tiens à préciser que j'ai tenter de changer le :
Code:
$('#sidebar li').click(function()
par :
Code:
$('#sidebar h2').click(function()
Mais le slideDown ne s'effectue plus du tout. :?
Merci d'avance :)
