Menu slideDown permetant le clic sur un sous menu

**faust-arp** · 01/10/2013, 23h03

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 php :

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
<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 :

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

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 :

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