web-dev-qa-db-fra.com

Comment brouiller l'élément div?

J'ai un menu déroulant à l'intérieur d'un DIV.

Je veux que la liste déroulante soit masquée lorsque l'utilisateur clique n'importe où ailleurs.

$('div').blur(function() { $(this).hide(); }

ne fonctionne pas.

Je sais que .blur fonctionne uniquement avec <a>, mais dans ce cas, quelle est la solution la plus simple?

javascriptjqueryhtmlonblur
18
Aamir Afridi

Je pense que le problème est que les divs ne déclenchent pas l'événement onfocusout. Vous devrez capturer les événements de clic sur le corps, puis déterminer si la cible était alors div menu. Si ce n'était pas le cas, l'utilisateur a cliqué ailleurs et la div doit être masquée.

<head>
  <script>
  $(document).ready(function(){
    $("body").click(function(e) {
      if(e.target.id !== 'menu'){
        $("#menu").hide();
      }      
    });
  });
  </script>
  <style>#menu { display: none; }</style>
</head>

<body>
  <div id="menu_button" onclick="$('#menu').show();">Menu....</div>
  <div id="menu"> <!-- Menu options here --> </div>

  <p>Other stuff</p>
</body>
16
David Henderson

Essayez d’utiliser l’attribut tabindex sur votre div, voir:

Vérifiez this post pour plus d’informations et une démo.

21
comenk
$("body").click(function (evt) {
     var target = evt.target;
     if(target.id !== 'menuContainer'){
            $(".menu").hide();
    }                
});

donnez un identifiant à la div, par exemple "menuContainer". alors vous pouvez vérifier par target.id au lieu de target.tagName pour vous assurer que c'est ce div spécifique.

5
PulledBull

Ce n'est pas la manière la plus propre, mais au lieu de capturer chaque événement de clic sur la page, vous pouvez ajouter un lien vide à votre div et l'utiliser comme "proxy de mise au point" pour la div.

Donc, votre marge changera à:

<div><a id="focus_proxy" href="#"></a></div>

et votre code Javascript devrait être associé à l'événement blur sur le lien:

$('div > #focus_proxy').blur(function() { $('div').hide() })

N'oubliez pas de mettre en évidence le lien lorsque vous montrez le div:

$('div > #focus_proxy').focus()
1
guyk

Je viens de rencontrer ce problème. Je suppose que rien de ce qui précède ne résout le problème correctement, alors je poste ma réponse ici. C'est une combinaison de certaines des réponses ci-dessus: Au moins, il a corrigé 2 problèmes que l'on pourrait rencontrer en vérifiant simplement si le point cliqué est le même "id"

$("body").click(function(e) {
    var x = e.target;

    //check if the clicked point is the trigger
    if($(x).attr("class") == "floatLink"){
        $(".menu").show();
    } 
    //check if the clicked point is the children of the div you want to show 
    else if($(x).closest(".menu").length <= 0){
       $(".menu").hide();
    }
});
0
user1345344