jQuery Girl
  1. jQuery Girl
  3. Basculement de la position d’arrière-plan au clic
Intereting Posts
javascript ssortingng.replace échoue à l’allemand Umlaute Comment passer des ID GridView et d’autres contrôles dans les fonctions jQuery? fermer select2 sur clic lorsque closeonselect a la valeur false Comment fermer une boîte de dialog jQuery après un appel AJAX JSON Meilleur moyen d’attraper la souris en dehors de l’élément mousedown flask jquery pour arrêter l’actualisation JS & jQuery: inArray () et indexOf () ne fonctionnent pas correctement si les index sont des chaînes? Image de défilement automatique plus haute que le conteneur en vol stationnaire jquery .data non visible dans firebug? appeler plusieurs fonctions successivement Supprimer le # de la valeur (jQuery) JQuery mouseup hors fenêtre – possible? Rendre la fonction jquery exécutée au chargement de la page Échanger les valeurs de la boîte de sélection Faire défiler un élément de la liste de sorte qu’il devienne visible?

Basculement de la position d’arrière-plan au clic

J’essaie d’atteindre cet objective. Existe – t-il un moyen simple de basculer la position de l’arrière-plan entre deux états sur un événement clic?

J’ai construit une fonction qui devrait fonctionner. Je ne sais pas pourquoi. J’ai passé plusieurs heures à essayer de réaliser cela pour une partie aussi fastidieuse de mon projet, mais c’est nécessaire.

S’il vous plaît jeter un oeil à cette fonction: 

$("#secondarrow").click(function(){ /*$(".arrows").toggle( function(){ $(this).css({"background-position":"0px 0px"}); }, function(){ $(this).css({"background-position":"0px -30px"}); });*/ /*$(".arrows").toggleClass(function() { if ($(this).is(".arrows")) { return ".arrowsup"; } else { return ".arrows"; } });*/ $('#secondarrow').toggle(function() { $("#arrow2").css('backgroundPosition', '0px -15px'); }, function() { $("#arrow2").css('backgroundPosition', '0px 0px'); }); $("#ukmore").slideToggle(100); $("#clause").slideToggle(100); });

En cliquant sur la deuxième flèche du nom de la division, elle affiche un certain nombre de sous-catégories et permet en même temps de basculer la position de fond d’un enfant div avec l’id # arrow2 d’une flèche pointant vers le bas (pour indiquer un clic). pour révéler plus ) à une flèche qui pointe vers le haut qui fait partie de la même image d’arrière-plan (pour indiquer cliquez pour masquer les sous-catégories ).

J’ai essayé plusieurs structures de fonctions différentes, mais aucune d’entre elles ne fonctionne correctement. La dernière – celle qui n’est pas commentée – modifie la position de l’arrière-plan pour afficher la flèche pointant vers le haut, mais uniquement sur la premier clic ET ne le fait que lorsque vous cliquez directement sur le div # arrow1, lorsque j’en ai besoin pour basculer d’avant en arrière en cliquant sur le div #secondarrow.

S’il vous plaît aider.

Tout d’abord, vous devez vous entraîner un peu plus à la gestion des événements.

.toggle est également un gestionnaire d’événements. Vous devez donc append un nouveau gestionnaire de clics pour le basculement lorsque l’élément est cliqué.

Il vous suffit de faire quelque chose comme ça: 

 $("#secondarrow").toggle(function() { $("#arrow2").css('backgroundPosition', '0px -15px'); //do more stuff on first click }, function() { $("#arrow2").css('backgroundPosition', '0px 0px'); //do more stuff on second click });

Je ne peux pas vérifier si ce qui précède fonctionnera pour vous. Je recommande de mettre votre code dans jsFiddle pour la question stackoverflow aussi.

Deuxième chose

Il est préférable de créer une classe CSS avec la deuxième position, puis de lier un événement de clic dans lequel vous basculez la classe: 

 $("#secondarrow").click(function(){ $("#arrow2").toggleClass('position2'); })

Et un conseil:

Utilisez les outils de développement firebug ou chrome pour déboguer votre code. Vous pouvez vérifier si votre sélecteur était correct. Lisez également sur la mise en cache du sélecteur, par exemple. $element=$('.something'); $element.show()