Aide Bannière

bonjour, j'ai fais ca pour a partir d'une div de 100% de largeur qui a la classe "salut" je puisse faire apparaitre un header de 300px height avec des infos dedans. idem pour le faire disparaitre.

Mon code est il bon (il fonctionne en tout cas), ou alors peut-on faire plus simple car j'ai dupliqué deux fois la même fonction pour avoir deux résultats différents.merci

Pour infos cela fais deux jours que je me suis mis à javascript.

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".salut").click(function(){
    if ($("#header2").is(":visible")){
      $("#header2").slideUp(1000);

    
    }

});     
$(".salut").click(function(){
    if ($("#header2").is(":hidden")){
      $("#header2").slideDown(1000);
      
      

    
    }
    
});  
$(".salut").css("cursor","pointer");  
});
</script>

Bonjour,

Effectivement ton code pourrait être optimisé:

<style type="text/css">
	.salut {
		cursor: pointer;
	}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$(".salut").click(function () {
		var element = $("#header2");
		if (element.is(":visible")) {
		        element.slideUp(1000);
		} else {
			element.slideDown(1000);
		}
	});     
});
</script>

Les améliorations:
- Tout d'abord, comme la fonction .css() est utilisé à tous les coup, peu importe le contexte, il est préférable de la déclarer dans une feuille de style.
- $(function(){ est l'équivalent de $(document).ready(function(){
- On attribut $('#header2') à une variable car chaque fois que tu appelle la fonction $(), jQuery recherche la page pour trouver l'élément en question. En l'attribuant à une variable, la fonction $() n'est appelée qu'une seule fois.
- Si #header2 n'est pas visible, alors il est caché. Inutile donc d'attacher deux évènements aux clic sur .salut. En utilisant la structure if/else tu couvre tous les cas

Mais au final, le plus simple serait sans aucun doute:

<style type="text/css">
	.salut {
		cursor: pointer;
	}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$(".salut").click(function () {
		$("#header2").slideToggle(1000);
	});     
});
</script>

.slideToggle() exécutant exactement ce que tu essaie de faire plus haut.
Modifié par Vaxilart (18 Feb 2012 - 03:06)