Закрытие меню jquery, нажатие на кнопку

Ответ 1

Вы можете указать любой щелчок, который пузырится до DOM, чтобы скрыть раскрывающийся список, и любой щелчок, который делает его родительским элементом выпадающего списка, чтобы прекратить пузыриться.

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

Демо: http://jsbin.com/umubad/2/edit

Ответ 2

как получить событие клика вне раскрывающегося меню, чтобы закрыть раскрывающееся меню? Вот код

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

Ответ 3

Вам нужно прикрепить событие click к некоторому элементу. Если на странице есть много других элементов, вы не захотите присоединить событие клика ко всем из них.

Одним из возможных способов было бы создать прозрачный div ниже выпадающего меню, но прежде всего других элементов на странице. Вы увидите это, когда будет показано падение. У элемента есть кликер, который скрывает выпадающее меню и прозрачный div.

$('#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>

Ответ 4

Остановка распространения событий в некоторых определенных элементах становится опасной, поскольку это может помешать запуску других скриптов. Поэтому проверьте, не запускается ли запуск из исключенной области внутри функции.

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

Здесь функция запускается при нажатии на документ, но исключает запуск из #menucontainer. Подробнее https://css-tricks.com/dangers-stopping-event-propagation/

Ответ 5

Выбранный ответ работает только для одного выпадающего меню. Для множественного решения:

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

Ответ 6

Еще один пример раскрывающегося списка, который работает 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="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css'; return false;" 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>