Как закрыть меню при клике вне него и при повторном клике на гамбургер?

1051

24 ноября 2016, 10:00

При клике на кнопку открывается меню. При клике вне меню оно закрывается. При клике на кнопку-гамбургер меню также должно закрываться, если оно открыто. Но у меня получается повторное открытие меню, сразу после закрытия, и оно не закрывается. Как сделать закрытие при клике вне меню, а также при клике на кнопку, если меню открыто?

$(".menu_btn").click(function() {
        if (!$("header").hasClass("open_menu")) {
            $("header").addClass("open_menu");
        }
    });
    $(document).mouseup(function(e) {
        var $target = $(e.target);
        if ($target.closest("nav").length === 0) {
            $("header").removeClass("open_menu");
        }
    });

Answer 1

$(".menu_btn").click(function() { 
            $(".header").toggleClass("open_menu");   
}); 
 
    $(document).mouseup(function(e) { 
        var $target = $(e.target); 
        if ($target.closest(".nav").length == 0) { 
            $(".header").removeClass("open_menu"); 
        } 
    });

.nav{ 
 
  width:250px; 
 
} 
.header{ 
display:none; 
} 
 
.open_menu{ 
display:block; 
  border:2px solid red; 
  background:#ccc; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class='nav'> 
<button class='menu_btn'>Click me</button> 
<ul class='header'> 
<li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
</ul> 
  </div>

UPD

$(".menu_btn").click(function() { 
  $(".header").toggleClass("open_menu"); 
}); 
 
$(document).mouseup(function(e) { 
  var $target = $(e.target); 
  if ($target.closest(".header").length == 0 && $target.closest(".menu_btn").length == 0) { 
    $(".header").removeClass("open_menu"); 
  } 
});

.header { 
  display: none; 
} 
.open_menu { 
  display: block; 
  border: 2px solid red; 
  background: #ccc; 
  width: 250px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='menu_btn'>Click me</button> 
<ul class='header'> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
  <li>1111111111111111111111</li> 
</ul>

Answer 2

Используйте toggleClass

$(".menu_btn").click(function() {
            if (!$("header").hasClass("open_menu")) {
                $("header").toggleClass("open_menu");
            }
        });
        $(document).mouseup(function(e) {
            var $target = $(e.target);
            if ($target.closest("nav").length === 0) {
                $("header").toggleClass("open_menu");
            }
        });

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

JS выбор блока контента внешней ссылкой

На главной странице (stom-mva ru) одни пункты меню(ссылки) ведут на другие страницы, другие пункты - меняют на div'ы (основной "контент") с помощью этого...

449

jQuery