javascript - multinivel - menu desplegable vertical html5

jquery desplegable menú de cierre haciendo clic afuera

Question

Estoy desarrollando un menú desplegable simple con jquery. Cuando un usuario presiona en un área activada, alternará el área desplegable. Mi pregunta es cómo tener un evento de clic fuera del menú desplegable para que cierre el menú desplegable.

Answer 1

¿Cómo tener un evento de clic fuera del menú desplegable para cerrar el menú desplegable? Aquí está el código

$(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();
    }
})

Answer 2

Debería adjuntar su evento de clic a algún elemento. Si hay muchos otros elementos en la página, no le gustaría adjuntar un evento de clic a todos ellos.

Una posible forma sería crear un div transparente debajo de su menú desplegable pero sobre todos los otros elementos en la página. Lo mostrarías cuando se mostrara el menú desplegable. Haga que el elemento tenga una curva de clic que oculte el menú desplegable y el div transparente.

$(''#clickCatcher'').click(function () { 
  $(''#dropContainer'').hide();
  $(this).hide();
});

#dropContainer { z-index: 101; ... }
#clickCatcher { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropDown"></div>
<div id="clickCatcher"></div>

Answer 3

Detener la propagación de eventos en algunos elementos en particular puede volverse peligroso ya que puede impedir que otros scripts se ejecuten. Por lo tanto, verifique si la activación es desde el área excluida desde el interior de la función.

$(document).on(''click'', function(event) {
  if (!$(event.target).closest(''#menucontainer'').length) {
    // Hide the menus.
  }
});

Aquí la función se inicia al hacer clic en el documento, pero excluye la activación desde #menucontainer. Para detalles https://css-tricks.com/dangers-stopping-event-propagation/

Answer 4

La respuesta seleccionada funciona solo para un menú desplegable. Para una solución múltiple sería:

$(''body'').click(function(event){
   $dropdowns.not($dropdowns.has(event.target)).hide();
});

Answer 5

Otro ejemplo desplegable múltiple que funciona https://jsfiddle.net/vgjddv6u/

$(''.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'');
});

<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>

Answer 6

Puede ver cualquier clic que haga burbujas en todo el DOM para ocultar el menú desplegable, y cualquier clic que haga que el padre del menú desplegable deje de burbujear.

/* 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();
});

Demostración: http://jsbin.com/umubad/2/edit