Закрыть меню при клике на страницу

153

10 августа 2018, 12:50

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

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

Answer 1

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