0

Возникает конфликт, при клике на саму кнопку меню - меню открывается, но т.к я кликнул в области страницы, то оно сразу же закрывается

$('.menu-toggle').click(function(e){
  e.preventDefault();
  $('.menu').show();
});

 $(document).click( function(event){
      if( $(event.target).closest(".menu").length ) 
        return;
      $(".menu").fadeOut("slow");
      event.stopPropagation();
});
.menu {
  display: none;
  background: #ccc;
  width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="menu-toggle">
  open menu
</a>
<ul class="menu">
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
</ul>

1 ответ 1

2

$('.menu-toggle').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('active');
  $('.menu').fadeToggle(200);
});

$(document).mousedown(function(e) {
  //при клике вне кнопки меню, самого меню и его потомков
  if (!$('.menu-toggle,.menu').is(e.target) && $('.menu').has(e.target).length === 0) {
    $('.menu-toggle').removeClass('active');
    $('.menu').hide();
  }
});
.menu {
  display: none;
  background: #ccc;
  width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" class="menu-toggle">
  open menu
</a>
<ul class="menu">
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
</ul>

4
  • stackoverflow.com/questions/37240922/…
    – user192664
    Commented 29 июн. 2018 в 6:31
  • Похоже, да. Очень даже может быть, что год назад сам оттуда брал.
    – zhurof
    Commented 29 июн. 2018 в 6:48
  • попробовал на реальном сайте sladosti38.ru нужно чтобы при нажатии на бургер меню открылось а потом при нажатии вне него скрывалось prntscr.com/k0qkzy по вашим примерам не получилось может быть что-то не учел, проверьте пожалуйста сам код элементов. Возможно нужно будет дополнить вопрос
    – stiv
    Commented 29 июн. 2018 в 9:46
  • В сниппете мой пример с вашей разметкой воспроизводится корректно. Пересматривать js-код на вашем сайте, извините, не буду.
    – zhurof
    Commented 29 июн. 2018 в 10:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.