11548 sujets

JavaScript, DOM et API Web HTML5

[RÉSOLU] Jquery - Arborescence dynamique

Bonjour à tous !

Je pense que mon problème peut intéresser beaucoup de monde car on voit de plus en plus de menu de ce type...

J'ai donc un menu découpé en plusieurs bloc qui contienne chacun un libelle, avec à coté une flèche permettant de faire disparaitre ou réapparaitre le contenu du bloc.

Lorsque l'on clique sur la flèche, il faut faire disparaitre uniquement la partie qui contient les informations et garder le libelle et la flèche permettant à l'utilisateur de faire tout réapparaitre si il le souhaite.

Ayant plusieurs bloc à la suite, je souhaiterai créer une fonction Jquery unique pour tout les blocs.

Voici mon code :


<html>
<body>
<script type="text/javascript">
			$(document).ready(function(){
				$("#fleche").click(function(){
					if ($("#bloc").is(":hidden")) {
					    $("#bloc").show("blind");
					  } else {
					    $("#bloc").hide("blind");
					  }
					
				});
			});
</script>

		<div id="profil">
			<div id="fleche"></div>
			<div id="titre">
				<img src="img/ico_scolaire.png">
				Profil de l'élève
			</div>
			<div id="bloc">
				<div id="cont1">
					Text du bloc 1
				</div>
			</div>
		</div>
		<div id="avantage">
			<div id="fleche"></div>
			<div id="titre">
				<img src="img/ico_check.png">
				Avantages
			</div>
			<div id="bloc">
				<div id="cont2">
					<ul>
						<li>Blabla2</li>
						<li>Blabla3</li>
					</ul>
				</div>
			</div>
		</div>

</body>
</html>


Cette fonction fonctionne uniquement pour le première objet. Je souhaiterai la rendre dynamique pour tout les blocs construits de la même manière.

J'ai regardé du coté de Closest mais je n'ai pas réussi à l'adapter.

<script type="text/javascript">
			$(document).ready(function(){
				$("#fleche").click(function(){
					if ($(this).closest('#bloc').is(":hidden")) {
					    $(this).closest('#bloc').show("blind");
					  } else {
					    $(this).closest('#bloc').hide("blind");
					  }
					
				});
			});
</script>


Merci beaucoup pour votre aide Smiley biggrin
Modifié par sweety808 (31 Mar 2011 - 12:42)
Je vois plusieurs problèmes :

Tu utilises plusieurs fois les mêmes #id, hors un ID est unique. Utilise plutot des .classes sinon ça ne marchera jamais.

Dans ton second script tu n'utilise pas la bonne méthode (fonction) à savoir : closest() récupère l'ancêtre le plus proche, hors dans ta construction la div #bloc n'est pas un ancetre.

En supposant que tu règle ton problème d'id/classe ton script pourrait etre :


<script type="text/javascript"> 
	$(document).ready(function(){ 
		$(".fleche").click(function(){ 
			var bloc = $(this).parent().find('.bloc');
			if (bloc.is(":hidden")) { 
				bloc.show("blind"); 
			} else { 
				bloc.hide("blind"); 
			}
		}); 
	}); 
</script>
Super, ça marche parfaitement Smiley ravi
Merci !

C'est vrai que j'ai la mauvaise habitude d'utiliser les id plutôt que les class pour faire la mise en forme de mes blocs div...

Une dernière petite question, est il possible d'appliquer une rotation à mon image "flech" (la div flèche contient une image d'une flèche orientée vers le bas que je souhaiterai orienter vers la droite lorsque la personne cache le menu. J'ai tenté :


<script type="text/javascript">  
    $(document).ready(function(){  
        $(".fleche").click(function(){  
            var bloc = $(this).parent().find('.bloc'); 
            if (bloc.is(":hidden")) {  
                bloc.show("blind");
                $(this).rotate(0);  
            } else {  
                bloc.hide("blind");  
                $(this).rotate(90);
            } 
        });  
    });  
</script>


Mais sans succès, du coup je ne sais pas si il est possible d'appliquer la fonction rotate à une div ou si c'est le faite que l'image soit appelée dans le CSS.



Voici le code Maj (sans la rotation des flèches) :


<html>
<body>
<script type="text/javascript">  
    $(document).ready(function(){  
        $(".fleche").click(function(){  
            var bloc = $(this).parent().find('.bloc'); 
            if (bloc.is(":hidden")) {  
                bloc.show("blind");  
            } else {  
                bloc.hide("blind");  
            } 
        });  
    });  
</script> 
		<div id="profil">
			<div class="fleche"></div>
			<div id="titre">
				<img src="img/ico_scolaire.png">
				Profil de l'élève
			</div>
			<div class="bloc">
				<div id="cont1">
					Text du bloc 1
				</div>
			</div>
		</div>
		<div id="avantage">
			<div class="fleche"></div>
			<div id="titre">
				<img src="img/ico_check.png">
				Avantages
			</div>
			<div class="bloc">
				<div id="cont2">
					<ul>
						<li>Blabla2</li>
						<li>Blabla3</li>
					</ul>
				</div>
			</div>
		</div>

</body>
</html>

Modifié par sweety808 (31 Mar 2011 - 12:24)
Pour ta fleche utilise une image à 2 états en background (css) et modifie le background-position via jquery. En supposant que ta fleche "mesure" 20px de haut :


<script type="text/javascript">  
    $(document).ready(function(){  
        $(".fleche").click(function(){  
            var bloc = $(this).parent().find('.bloc'); 
            if (bloc.is(":hidden")) {
                $(this).css('background-position', '0 -20px');
                bloc.show("blind");  
            } else {  
                $(this).css('background-position', '0 0');
                bloc.hide("blind");  
            } 
        });  
    });  
</script>
Nickel, merci beaucoup Nukleo pour ton aide ! (la flèche faisait 16px de haut, mais ça tu pouvait pas le savoir Smiley cligne ...).

Bon après midi !
Concernant le changement de position, je conseille plutôt de gérer ça via une classe CSS supplémentaire. C'est plus facile à modifier, et s'il y a des spécificités pour les autres navigateurs c'est plus simple à intégrer :

 
    $(document).ready(function(){   
        $(".fleche").click(function(){   
            var bloc = $(this).parent().find('.bloc');  
            if (bloc.is(":hidden")) { 
                $(this).addClass('flecheDown'); 
                bloc.show("blind");   
            } else {   
                $(this).removeClass('flecheDown'); 
                bloc.hide("blind");   
            }  
        });   
    });



/* et la  classe css */
.flecheDown{
    background-position:0 -20px;
}



Ah oui, sinon la fonction rotate() n'existe pas dans jQuery, je sais pas d'où tu la sors ? (d'un plug-in peut-être ?)
Et en place d'un show('blind') tu peux aussi faire un slideDown() (et un slideUp() pour le hide()) Mais bon au final ça revient au même Smiley lol
ZeB_panam a écrit :
Concernant le changement de position, je conseille plutôt de gérer ça via une classe CSS supplémentaire. C'est plus facile à modifier, et s'il y a des spécificités pour les autres navigateurs c'est plus simple à intégrer...


Pas bête Smiley smile

Pour pousser le vice un poil plus loin : dans ce cas j'aurais utilisé toggleClass() plutot que addClass() removeClass() Smiley langue
Modifié par Nukleo (31 Mar 2011 - 12:49)
Pour le show('blind') c'est tout simplement que je ne suis pas encore arrêté sur le type d'effet, Bounce me plait aussi, du coup c'est plus clair si je veux changer...

J'ai essayé le toggleClass(), mais cela ne marche pas chez moi...ce n'est pas très grave car ça fonctionne déja en l'état, mais je me dis que peut être c'est du au fait qu'on appel une class plutôt qu'un id ???


    $(document).ready(function(){    
        $(".fleche").click(function(){    
            var bloc = $(this).parent().find('.bloc');   
            if (bloc.is(":hidden")) {  
                $(this).toggleClass('flecheDown');  
                bloc.show("blind");    
            } else {    
                $(this).toggleClass('flecheDown');  
                bloc.hide("blind");    
            }   
        });    
    });
Nukleo a écrit :
Pour pousser le vice un poil plus loin : dans ce cas j'aurais utilisé toggleClass() plutot que addClass() removeClass() Smiley langue

Le vice dans le web design, ça optimise les sites, donc je valide Smiley lol

sweety808 a écrit :

J'ai essayé le toggleClass(), mais cela ne marche pas chez moi...ce n'est pas très grave car ça fonctionne déja en l'état, mais je me dis que peut être c'est du au fait qu'on appel une class plutôt qu'un id ???

Euh… bah oui on active/désactive une classe. Je comprend pas pourquoi tu nous parles d'id ?
Tu as bien rajouté dans tes CSS la déclaration de la classe .flecheDown ?


Ah, et pas besoin d'inclure le toggleClass() dans le if (quelque soit la condition, c'est la même action) :

$(document).ready(function(){     
        $(".fleche").click(function(){ 
            $(this).toggleClass('flecheDown');       
            var bloc = $(this).parent().find('.bloc');   
            if (bloc.is(":hidden")) {   
                bloc.show("blind");     
            } else {     
                bloc.hide("blind");     
            }    
        });     
});
Oui effectivement ça marche maintenant en sortant la toggleClass de la condition IF.
En tout cas merci à vous deux !
Sujet clos
Aller à