Discussion :

[faust-arp]

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

 $('#sidebar li').click(function()

par :

Code :

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

 $('#sidebar h2').click(function()

Mais le slideDown ne s'effectue plus du tout.

Merci d'avance

[Bovino]

Je tiens à préciser que j'ai tenter de changer le

Donc tu appliques dans ce cas la fonction au clic sur les balises <h2>.

Code :

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

var section = $(this).children('ul');

Sauf que les balises <h2> n'ont pas d'enfant <ul> !

Et sinon,

Code html :

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

<ul id="section">

c'est pas bien d'affecter un id de ce type dans une boucle.
Un id doit être unique dans la page !

[faust-arp]

En effet, merci pour vos remarques j'ai donc modifié :

Code :

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

var section = $(this).children('ul');

en :

Code :

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

var section = $(this).parent('li').children('ul');

Je sais pas si c'est la meilleure optimisation mais ça fonctionne en tous cas. D'autre part j'ai changer cet ID en ajoutant l'id de la section affichée. Cependant comment puis-je appeler ces "id" en une seul fois alors qu'ils sont tous différent maintenant ?

Code php :

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

<li id="<?php echo "section ".$sec['Section']['id'];?>">

[danielhagnoul]

Bonsoir

Il ne faut pas abuser des ID. Exemple (il suffit de copier-coller pour tester) :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			//"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://code.jquery.com/jquery-2.1.0-beta1.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
$( function(){
 
	$( "#sidebar > li" ).on( "click", function(){
 
		/*
		 * L'objet jQuery contenant la section
		 */
		var jObjSection = $( this ).children( "ul.section" );
 
		/*
		 * Fermer toutes les sections ouvertes,
		 * sauf celle en cours de traitement.
		 */
		$( "ul.section" ).not( jObjSection ).hide();
 
		/*
		 * Ouvrir ou fermer la section
		 */
		jObjSection.toggle();
	});
 
});
 
$( window ).load( function(){
 
});
 
		});
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
		li { list-style: none; }
		.section { display: none; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<ul id="sidebar"> 	
    <li>
        <h2>Catégorie A</h2>
        <ul class="section">
            <li>
                <h3>Section A1</h3>
            </li>
            <li>
                <h3>Section A2</h3>
            </li>
            <li>
                <h3>Section A3</h3>
            </li>
        </ul>
    </li>
    <li>
        <h2>Catégorie B</h2>
        <ul class="section">
            <li>
                <h3>Section B1</h3>
            </li>
            <li>
                <h3>Section B2</h3>
            </li>
            <li>
                <h3>Section B3</h3>
            </li>
        </ul>
    </li>
    <li>
        <h2>Catégorie C</h2>
        <ul class="section">
            <li>
                <h3>Section C1</h3>
            </li>
            <li>
                <h3>Section C2</h3>
            </li>
            <li>
                <h3>Section C3</h3>
            </li>
        </ul>
    </li>
</ul>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-09-28T00:20:27.88+02:00" pubdate>2013-09-28T00:20:27.88+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>