0

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

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

2 ответа 2

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>

9
  • Не подскажите, почему закрывается блок при клике слева/справа/снизу, но не сверху?
    – Frontender
    10 ноя 2016 в 11:44
  • @ВикторПавлов где сверху?
    – C.Raf.T
    10 ноя 2016 в 11:45
  • joxi.ru/KAg7ZBOSg1ld5A
    – Frontender
    10 ноя 2016 в 12:05
  • @ВикторПавлов потомучто, кнопка и открывающийся блок лежат в блоке ('nav');
    – C.Raf.T
    10 ноя 2016 в 12:07
  • 1
    @Alla в рамках здешнего форума это не реально... но я бы вам советовал для понемания фунций и вообще для понемания jQuery, по большей части, обращаться к первоисточнику jquery.com там достаточно полно изложено описание и примеры.
    – C.Raf.T
    24 мая 2017 в 6:21
0

Используйте 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");
            }
        });
3
  • Работает точно также, как и у меня. Есои меню открыто и кликнуть на гамбургер, меню не закрывается.
    – Frontender
    10 ноя 2016 в 11:35
  • Что за "гамбургер"?! Дайте HTML
    – tCode
    10 ноя 2016 в 11:38
  • Гамбургер - обычная кнопка.
    – Frontender
    10 ноя 2016 в 11:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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