单击“外部区域”时关闭移动菜单

Question

如果我问了同样的问题，我很抱歉，但我已经尝试过任何解决办法，但我仍然没有任何东西给我。和标题一样，当我点击区域菜单的外部时，我想关闭移动菜单。这是我使用切换按钮时的jquery

$('.mobile-nav-toggler').click(function() {
    $('.mobile-nav-overlay').fadeToggle(200)
    $('.mobile-nav-toggler').toggleClass('active')
    $('body').toggleClass('mobile-nav-opened')
  });

移动导航覆盖是层菜单。有人能帮我吗？谢谢

Answer 1

之后，移动菜单将被点击，它将打开，在这个菜单下添加100%的宽度和高度和不透明度将是你所需要的。在此之后，添加另一个脚本，它将显示:单击..div it时关闭菜单

$('.new-div-under-menu').click(function() {
     $('.menu').hide() // or removeClass, or toggle or something
     $('.new-div-under-menu').hide()
});

Answer 2

像这样简单的东西应该会起作用:基本上，在页面上的任何点击(html单击)上，它都会检查主体是否有类“移动导航打开”(只有在打开菜单时才存在)，所以如果是这样的话，您可以将菜单隐藏在这里。

只要您单击nav容器(我的示例中的“.”)，此事件就不会发生。

$('html').click(function() {
    if ($('body').hasClass('mobile-nav-opened')){
        // Hide your menu here
    }
});

// replace mobile-nav with your entire nav container
$('.mobile-nav').click(function(e){
    e.stopPropagation();
});

Answer 3

我们可以使用以下代码来完成这个任务：

Note：带有红色背景的“mobile”文本显示移动菜单是“Off”；“绿色背景”显示的是“On”。

在本例中，return false在toggler方法> mobileMenuToggle中非常重要。

​

$(function() {
  mobileMenuToggle();
  closeMobileMenu();
});

function mobileMenuToggle() {
  $('.mobile-nav-toggler').click(function() {
    $(this).toggleClass('active');
    $('body').toggleClass('mobile-nav-opened');
    return false;
  });
}

function closeMobileMenu() {
  $('html').click(function() {
    $('.mobile-nav-toggler').removeClass('active');
    $('body').removeClass('mobile-nav-opened');
  });
}

.mobile-nav-toggler {
  cursor: pointer;
  background: red;
  color: white;
  padding: 20px 30px;
  display: inline-block;
}

.mobile-nav-toggler.active {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-nav-toggler">
  Mobile Nav Toggle
</div>

​