Discussion :

[fourmizen]

Bonjour à tous,
j'ai trouvé un bout de code en javascript sur internet et j'aimerais le réécrire en jquery car j'utilise cette bibliothèque sur mon site et j'aimerais un effet de slide lorsque le menu descend.
Le problème est que je ne maitrise absolument pas javascript ou jquery. Je n'utilise jquery que pour quelques effets éparses.
Pourriez vous m'aider en me donnant le code équivalent en jquery?

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
onload = function() {
	var getEls = document.getElementById('menu').getElementsByTagName("LI");
	var getListElts = document.getElementById('submenus').getElementsByTagName("UL");
	var getAgn = getEls;
 
 
	for (var i=0; i<getEls.length; i++) {
		getEls[i].onclick=function() {
		this.className = this.className == 'clicked' ? '' : 'clicked';
 
		for (var z=0; z<getAgn.length; z++) {
		if (this.id != getAgn[z].id){
				getAgn[z].className = '';
			}
		}
 
 
		ulId = this.id.replace("li", "ul");
		document.getElementById(ulId).className = document.getElementById(ulId).className == 'yes' ? 'none' : 'yes';
 
			for (var i=0; i<getListElts.length; i++) {
			if (ulId != getListElts[i].id && getListElts[i].className == "yes"){
					getListElts[i].className = "none";
				}
			}
		}
	}
}

Merci beaucoup

[boboss123]

salut,

ton code est très bizarre me semble t-il : il doit faire quoi exactement ?

je verrais bien un code du genre (mais ce n'est pas exactement ce que fait ta fonction):

Code :

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

1
2
3
4
5
6
7
8
9
10
	$("#menu li").click(function(){
 
		$("#menu li").each(function(){
			$(this).removeClass("clicked");
			$(this).find("#submenus ul").removeClass("yes");
		});
 
		$(this).addClass("clicked");
		$(this).find("#submenus ul").addClass("yes");
	}

[fourmizen]

Salut,
merci pour ta réponse.

Le code provient de ce site :
http://www.stunicholls.com/menu/pro_...ne_3.html#nogo

C'est un menu dropline. Je pense qu'avec jquery ca ne doit pas prendre beaucoup de lignes de code. En fait ce qui m'a bloqué pour l'écrire en jquery c'est de passer une variable en paramètres (le numéro de la li et de l'ul).

Ce serait possible de faire du onmousehover avec jquery pour ce code?

[boboss123]

voila ça devrait marcher

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	$("ul#menu > li").click(function(){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
 
		$("ul#menu > li.clicked").removeClass("clicked"); // on supprime la classe "clicked" sur tous les elements "ul#menu > li.clicked"
		$("div#submenus > ul.yes").removeClass("yes"); // on supprime la classe "yes" sur tous les elements "ul#menu > li.yes"
 
		$(this).addClass("clicked"); // on ajoute la classe "clicked" sur l'element qui a été cliqué
 
                var id = $(this).attr("id"); // on recupere l'id de l'element cliqué
                id = id.replace("li", "ul"); // on remplace dans le nom de l'id "li" par "ul"
 
                $("div#submenus > ul#" + id).addClass("yes"); // on ajoute la classe "yes" à l'element "div#submenus > ul#ul_?"
	});

=> comme tu peux le voir c'est très simple d'utiliser jquery : tu devrais t'y mettre ...

Le selecteur query $("???") est le même qu'on utilise en css

Pour le mousehover, je te conseille plutôt de le gérer directement en css sur l'élément <a> de ta liste

[fourmizen]

Merci! Super le code commenté
Faudrait que je me mette à jquery mais là j'ai pas trop le temps...cet été

J'ai compris la fonction que tu as écrite par contre que me conseille tu pour faire apparaître les éléments :
- inclure les lignes de script permettant l'affichage dans cette fonction?
- créer une autre fonction qui gère l'affichage?
Quand je dis gérer l'affichage c'est juste un .slideToggle()

En tout cas merci encore!
++

[boboss123]

je suis pas sur d'avoir tout compris a ta question : tu veux faire un slide sur tes elements #submenus, c'est ça ?

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
	$("ul#menu > li").click(function(){ // gestion de l'evenement onclick sur les elements "ul#menu > li"
 
		$("ul#menu > li.clicked").removeClass("clicked"); // on supprime la classe "clicked" sur tous les elements "ul#menu > li.clicked"
 
		$("div#submenus > ul.yes").each(function(){ // balayage de tous les elements (en l'occurence, il ne devrait y en avoir qu'un)
			$(this).removeClass("yes");
			$(this).slideUp(); // cache
		});
		// $("div#submenus > ul.yes").removeClass("yes").slideUp(); // peut-etre que ça marche => a tester...
 
		$(this).addClass("clicked"); // on ajoute la classe "clicked" sur l'element qui a été cliqué
 
                var id = $(this).attr("id"); // on recupere l'id de l'element cliqué
                id = id.replace("li", "ul"); // on remplace dans le nom de l'id "li" par "ul"
 
		$("div#submenus > ul#" + id).each(function(){ // balayage de tous les elements (en l'occurence, il ne devrait y en avoir qu'un)
			$(this).addClass("yes");
			$(this).slideDown(); // affiche
		});
		//$("div#submenus > ul#" + id).addClass("yes").slideDown(); // peut-etre que ça marche => a tester...
 
	});

[fourmizen]

oui c'est ca. mais je pense mettre un toogle à la place pour pouvoir aussi les remonter.
J'ai oublié de te filer le code html dsl:

Code :

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

1
2
3
<li class="sub" id="no1"><a href="#nogo"><img src="../data/images/e.png" alt="Accueil" width="25" height="30" border="0" /></a></li>
              <li class="sub" id="li_1"><a href="#nogo"><b>XXXXXXXXXX</b></a></li>
              <li class="sub" id="li_2"><a href="#nogo"><b>XXXXXXXXXX</b></a></li>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="submenus">
        <ul id="ul_1" class="none">
          <li><a href="#nogo21">XXXXXXXXXX</a></li>
          <li><a href="#nogo22">XXXXXXXXXX</a></li>
          <li><a href="#nogo23">XXXXXXXXXX</a></li>
        </ul>
        <ul id="ul_2" class="none">
          <li><a href="#nogo11">XXXXXXXXXX</a></li>
          <li><a href="#nogo12">XXXXXXXXXX</a></li>
          <li><a href="#nogo13">XXXXXXXXXX</a></li>
          <li><a href="#nogo14">XXXXXXXXXX</a></li>
        </ul>