Discussion :

[StripMat]

Bonjour, je vous propose ici un petit JSFiddle concernant une problématique que je n'arrive pas à résoudre.

Le but ici est de créer un mode de compatibilité pour IE9 afin de gérer mes menu déroulants, ici je voudrai gérer sa au clic.

Je dispose de menu composés d'items et de sous-menus, je voudrai qu'au clic sur le <li> parent, cela display le <ul> enfant. Jusqu'ici sa fonctionne sauf lorsque la structure est la suivante :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<ul class="nav">
	<li><a>item1</a>
		<ul class="sous-nav-1">
			<li><a>sous-item1</a><
				<ul class="sous-nav-2">
					<li><a>sous-sous-item1</a></li>
				</ul>
			<li>
		</ul>
	</li>
</ul>

Essayer de cliquer sur "Historique et bases de données", cela va display le sous-menu, logique. Maintenant essayé de dérouler le menu sous "Reunion expe"...
Problématique: A partir d'un point du DOM, identifier sur quel <li> je clic et sélectionner uniquement l'<ul> enfant. Il faut que le tout fonctionne peut importe le nombre de sous-menu imbriqués.

How to do ?

[kakashi99]

salut,

en fait le problème est que quand tu clic sur ton deuxième "dropdown-submenu" tu émet aussi un event clic sur le "dropdown-submenu" qui le contient...

avec ça, ça devrait marcher (en rouge):

Code :

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

1
2
3
4
5
6
$('.dropdown-submenu').on('click', function(e){
    //alert('clicked');
    $(this).find(".dropdown-menu:first").toggle();
    e.stopPropagation();
});

[StripMat]

C'est magnifique, exactement ce que je veux

J'avais bien identifié le problème mais n'avais aucune idée de comment y remédier, je connaissais pas le principe de propagation.

Merci beaucoup, sujet résolu !

[StripMat]

J'ai de nouveau un problème similaire, je m'explique.

Code html :

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

1
2
3
4
5
6
7
8
<li class="dropdown-submenu"><a unselectable="on" href="#">
	Solanacées Cucurbitacés<span class="caret"></span></a><span class="caret-ie"></span>
	<ul class="dropdown-menu">	
		<li><a href="#">Annexe DV1</a></li>
		<li><a href="#">Variétés</a></li>
		<li class="dropdown-submenu"><a href="#">Programme d'appro<span class="caret"></span></a><span class="caret-ie"></span>
			<ul class="dropdown-menu">
...etc

J'ai deux éléments <span> placés sur mes li, l'un dans le <a>, l'autre à l'exterieur. En mode clic to display je veux que le sous menu soit display sur le clic du <li>, dans ce cas le 'caret' est rendu invisible et 'caret-ie' visible (en gros je veux que l'user sache ou cliquer grace à ce caret-ie, donc je le sors du <a>), néamoins je n'arrive pas à créer le sélecteur jQuery qui au survor du <li> changera la couleur de ce 'span-ie'.


Voici ce que j'ai

Code javascript :

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

1
2
3
4
$('.dropdown-submenu li').on('hover', function(e){
	$(this).find(".caret-ie").css("color", "blue");
	e.stopPropagation();
});

La encore je ne veux qu'un seul 'caret-ie' change de couleur.

[kakashi99]

...j'ai rien compris...

et j'ai pas trouvé dans le fiddle...

[StripMat]

Quand on dit que le plus dur est de se faire comprendre

Tiens, j'ai update le fiddle

http://jsfiddle.net/r37jtwec/13/

Ce que je veux, c'est qu'au survol d'un <li> (possedant un sous-item <ul>), le <span class="caret-ie"> change de couleur. Une solution en JS ou CSS me convient, le but est juste d'indiquer à l'utilisateur que s'il survol ce <li>, il peut dérouler un sous-menu.

[StripMat]

J'ai trouvé une solution, c'est pas exactement ce que je voulais mais sa le fait :

Code css :

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

1
2
3
.dropdown-submenu:hover > .caret-ie{
    color:green;
}

[kakashi99]

ok, sinon un truc dans le genre ça peut peut-etre le faire

Code :

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

1
2
3
4
5
6
7
8
9
 
 
$('.dropdown-menu li').hover( function(e) {
    e.stopPropagation();
    $(".caret-ie").removeClass("colorBlue");
    $(this).find(".caret-ie:first").addClass("colorBlue");
}, function() {
    $(".caret-ie").removeClass("colorBlue");
} )