Discussion :

[chlock62]

Bonjour, j'ai un menu horizontal qui ce présente comme ci-dessous:

Code html :

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
<ul class="header_onglets nav" id="header_onglets">
                                    <li><a href="index.html"><span>Accueil</span></a></li>
                                    <li style="display: none;" class="hover"><a href="#"><span>Qui sommes nous?</span></a>
									<ul>
                                            <li><a href="#histoire">Histoire</a></li>
                                            <li><a href="#notreprojetentreprise">Notre projet d’entreprise</a></li>
                                                <li><a href="#notreforce">Notre force</a></li>
                                                <li><a href="#formulaire">Nous contacter</a></li>
												</ul></li>
                                    <li style="display: none;"><a href="#"><span>Nos produits web</span></a><ul> 
                                            <li><a href="#siteweb">Sites web</a></li>
                                                <li><a href="#ecommerce">Ecommerce</a></li>
                                                <li><a href="#raisa">Plateforme de georéservation<br>(RESA,RESA+)</a></li>
                                                <li><a href="#barometre">Baromètre : sociaux, satisfaction,<br>évènementiel</a></li>
                                                <li><a href="#application">Application<br>(Domotique, réalité augmentée…)</a></li>
                                        </ul></li>
                                    <li style="display: none;"><a href="#"><span>Communication</span></a><ul>
                                                   <li><a href="#conception-logo">Conception(logo, flyer et affiche)</a></li>
                                                <li><a href="#communication-interne">Campagne de communication interne/externe</a></li>
                                                <li><a href="#communication-externe">Campagne de communication</a></li>
                                                <li><a href="#campagne-publicite">Publicité, Cadeaux d’affaires</a></li> 
                                                <li><a href="#conception-support-anim-prototype">Supports d'animation, pédagogique</a></li>
                                                <li><a href="#marketing-stratetopé">Marketing stratégy opérationnel</a></li>
                                                <li><a href="#realisation-enquete-utietclt">Enquête satisfaction, client, utilisateur</a></li>
                                        </ul>
 
                                    </li>
                                    <li style="display: none;"><a href="#"><span>Notre équipe</span></a><ul>
                                            <li><a href="#equipe-developpement"><strong>Notre équipeppement</strong></a></li>
                                                <li><a href="#equip-marketing-et-communication"><strong>Notre équipe Marketing et<br>Communication</strong> </a></li>
                                                <li><a href="#experts-metier"><strong>Nos experts métie</strong></a></li>
                                        </ul></li>
                                </ul>

Donc comme nous le voyons, nous avons deux niveau à ce menu!

Maintenant j'ai la fonction js suivante pour les élément de premier niveau:

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
$(".nav  > li").click(function() {
 
			console.log($('.nav > li'));
			$('.nav  > li > a').filter(function() {
 
			return $(this).attr('href') != 'index.html' || $(this).attr('href')==="#";
 
			}).parent().css({'display':'none'});
 
 
 
				//$('.nav ').children('li').addClass('cache');
			//$(this).siblings().css();
 
 
			$(this).toggleClass('hover');
			//$(this).css({'display':'block'});				
 
		});

Et la fonction suivante pour les éléments de second niveau:

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
 
 $('.nav > li > ul > li > a').click(function(){
				//$('.nav ').children('li').removeClass('cache');	
				$('.nav  li').css({'display':'block'});
 
				//console.log($(this));
 
				//$(this).parent().addClass('cache');
 
				//console.log($(".nav > li").length);
 
 
 
 
				/*$("#content").children().css({'display':'none'});
				$($(this).children('a').attr('href')).css({'display':'block'});
				*/
				});

Nous nous intéresseroons pas au contenu des fonctions, juste au premiéere suivant:

Le problème est le suivant, lors d'un click sur les éléments de second niveau $('.nav > li > ul > li > a').click,"deuxiéme fonction", l'événement de la prémiere $(".nav > li").click(function() s'éxécute également, alors que je vise bien au click les élément de second niveau.
Une idée?

[NoSmoking]

Bonjour,
pas sûr d'avoir tout compris, d'autant que presque tous tes LI sont en display:none, mais regarde du coté de event.stopPropagation().