jquery menu déroulant de clôture en cliquant à l'extérieur

Je suis en train d'élaborer un simple menu déroulant avec jquery . Lorsqu'un utilisateur appuyez sur une zone de déclenchement , il permet de basculer entre la liste déroulante de la zone. Ma question est comment faire pour avoir un événement de clic en dehors de la liste déroulante du menu pour qu'il fermer le menu déroulant ?

InformationsquelleAutor user670800 | 2011-06-24

109

Vous pouvez dire tout sur que les bulles tout en haut de la DOM pour masquer la liste déroulante et cliquer que le fait pour le parent de la liste déroulante pour arrêter de bulles.
```
/* Anything that gets to the document
   will hide the dropdown */
$(document).click(function(){
  $("#dropdown").hide();
});

/* Clicks within the dropdown won't make
   it past the dropdown itself */
$("#dropdown").click(function(e){
  e.stopPropagation();
});
```
Démo: http://jsbin.com/umubad/2/edit
- Si il y a d'autres éléments sur la page qui ont des gestionnaires de clic, on pourrait éviter l'événement click de couler dans le document.
- Seulement si elles sont l'arrêt de la propagation seraient-ils l'empêcher.
- Donc, est-ce la raison de cette solutions fonctionne bien? Grâce à vos commentaires, @JonathanSampson et @jacob.toye?
- Cela ne fonctionne pas si vous avez deux listes déroulantes comme vous serez en arrêtant l'événement de déclenchement jusqu'à ce document.
- Cette solution n'est pas universelle. Il en fait des blocs de la liste déroulante de montrer dans certains cas.
InformationsquelleAutor Sampson
27

comment avoir un événement de clic en dehors de la liste déroulante du menu pour qu'il fermer le menu déroulant ?
Heres le code
```
$(document).click(function (e) {
    e.stopPropagation();
    var container = $(".dropDown");

    //check if the clicked area is dropDown or not
    if (container.has(e.target).length === 0) {
        $('.subMenu').hide();
    }
})
```
- Mon préféré la solution de la grappe, car il permet d'événements sur des éléments enfants se propagent correctement.
- Nice! Cela fonctionne vraiment bien. Donc, essentiellement, cette logique, container.has(e.target).length === 0, vérifie si la cible de l'événement est un $('.dropDown'), et si non, de masquer le subMenu?
- Cela ne marchera pas si le clic est dans une iframe
InformationsquelleAutor Pash
12

Vous devez joindre à votre événement de clic sur un élément. Si il ya beaucoup d'autres éléments sur la page, vous ne voulez pas joindre un événement de clic à toutes et tous.

Un moyen potentiel serait de créer un transparent div en dessous de votre menu déroulant, mais au-dessus de tous les autres éléments sur la page. Vous la présenter lors de la chute vers le bas a été montré. Avoir de l'élément cliquez sur un virage qui cache la liste déroulante, et la transparence de la div.

JS:
```
$('#clickCatcher').click(function () { 
  $('#dropContainer').hide();
  $(this).hide();
});
```
CSS:
```
#dropContainer { z-index: 101; ... }
#clickCatcher { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
```
HTML:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropDown"></div>
<div id="clickCatcher"></div>
```
- +1 Soignée méthode. Certainement la peine de donner un coup de feu. Il est intéressant de noter que vous n'avez pas besoin de joindre cliquez sur les événements de tous les autres éléments; un seul gestionnaire au niveau du document devrait être suffisante dans la plupart des cas.
InformationsquelleAutor jacob.toye
10

L'arrêt de la Propagation de l'Évènement en particulier les éléments de ma y devenir dangereuse, car elle peut éviter à d'autres de certains scripts en cours d'exécution. Afin de vérifier si le déclenchement est de la zone d'exclusion à partir de l'intérieur de la fonction.
```
$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    //Hide the menus.
  }
});
```
Ici la fonction est lancée en cliquant sur le document, mais il exclut le déclenchement de #menucontainer.
Pour plus de détails https://css-tricks.com/dangers-stopping-event-propagation/
- Grand discrète mise en œuvre!
InformationsquelleAutor Jithin B
5

Réponse sélectionnée fonctionne pour un menu déroulant seulement.
Pour plusieurs solution serait:
```
$('body').click(function(event){
   $dropdowns.not($dropdowns.has(event.target)).hide();
});
```
InformationsquelleAutor Maciej Pyszyński

Un autre multiple déroulant exemple qui fonctionne https://jsfiddle.net/vgjddv6u/

JS:

$('.moderate .button').on('click', (event) => {
  $(event.target).siblings('.dropdown')
    .toggleClass('is-open');
});

$(document).click(function(e) {
  $('.moderate')
    .not($('.moderate').has($(e.target)))
    .children('.dropdown')
    .removeClass('is-open');
});

HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet" />

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<style>
.dropdown {
  box-shadow: 0 0 2px #777;
  display: none;
  left: 0;
  position: absolute;
  padding: 2px;
  z-index: 10;
}

.dropdown a {
  font-size: 12px;
  padding: 4px;
}

.dropdown.is-open {
  display: block;
}
</style>


<div class="control moderate">
  <button class="button is-small" type="button">
        moderate
      </button>

  <div class="box dropdown">
    <ul>
      <li><a class="nav-item">edit</a></li>
      <li><a class="nav-item">delete</a></li>
      <li><a class="nav-item">block user</a>   </li>
    </ul>
  </div>
</div>


<div class="control moderate">
  <button class="button is-small" type="button">
        moderate
      </button>

  <div class="box dropdown">
    <ul>
      <li><a class="nav-item">edit</a></li>
      <li><a class="nav-item">delete</a></li>
      <li><a class="nav-item">block user</a></li>
    </ul>
  </div>
</div>

InformationsquelleAutor Y. Özdemir

Vous devez vous connecter pour publier un commentaire.