jQuery détection de clic en dehors de la zone spécifiée problème

Question

Hey les gars, ok, donc, j'ai une playlist jPlayer plugin jQuery caché sur ma page d'accueil (http://www.marioplanet.com).

Maintenant, il est caché par défaut et est seulement supposé être activé en cliquant sur l'image étiquetée "Musique" dans le coin en haut à droite de mon en-tête <div>.

Cela fonctionne très bien, et une fois qu'un utilisateur clique sur l'image, une action slideToggle sympa et lisse se produit sur l'élément <div id="player"> et elle est révélée.

Maintenant, tout est bon. Jusqu'à ce que l'utilisateur clique à nouveau n'importe où sauf l'image Musique, l'élément <div id="player"> glissera encore une fois, disparaissant.

Le seul problème, c'est lorsque l'utilisateur final clique à nouveau sur l'image musicale, car, autant que je sache, il glisse deux fois!

Ce n'est certainement pas ce que nous voulons.

Alors, voici le code qui a été adapté par courrier utile de Magnar:

$('#text_music').click(function() { 
    $('#jplayer').slideToggle(500, function() { 
     $("body").click(function (event) { 
      var outside = $(event.originalTarget).parents("#popup").length === 0; 
      if (outside) { 
       $("#jplayer").slideToggle(500); 
       $("body").unbind("click"); 
      } 
     }); 
    }); 
}); 

#text_music est mon image à lire "Musique"
#jplayer est mon <div> contenant mon plugin jPlayer

Alors, que Je veux essayer et faire est de déclarer une variable, tout comme la façon dont var outside est déclaré dans le code ci-dessus, qui gère avec le clic de l'image #text_music une fois que le #jplayer <div> est déjà visible.

Cependant, j'ai besoin d'un peu d'aide pour comprendre la signification de cette variable.

Quelqu'un veut-il offrir des mots de sagesse?

:) Merci!

Answer 1

Jetez un oeil à jQuery outside events plugin pour détecter des événements en dehors de l'élément spécifique.