Aide Bannière - Alsacreations

Des livres incontournables pour tout maîtriser

Auteur
doudouzeb	# 18 Feb 2012, 02:51:25
2 Posts	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>`
2 Posts
Vaxilart	# 18 Feb 2012, 03:05:37
612 Posts	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)
612 Posts
Prévenir un modérateur