Question

我很抱歉，如果我问过同样的问题，但我已经尝试了任何解决方案，但仍然没有为我提供任何东西..就像标题一样，我想关闭手机菜单，当我点击该区域外菜单。这是我使用toggler按钮时的jquery

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

mobile-nav-overlay是图层菜单。有人可以帮帮我吗？感谢

Answer 1

点击移动菜单后，它将打开，在此菜单div下添加100％宽度和高度，不透明度将是您所需要的。在此之后添加另一个脚本，它将说：单击.div-under-menu

时关闭菜单

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

Answer 2

这样简单应该有效：基本上，在页面上的任何点击（单击鼠标）时，它会检查主体是否具有“mobile-nav-opened”类，该类仅在菜单打开时才存在，因此如果是这种情况，您可以在此处隐藏菜单。

只要您点击导航容器（在我的示例中为'。mobile-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

可以使用以下代码执行此操作：

注意：带有红色背景的“移动导航切换”文字显示移动设备菜单关闭 ; 绿色背景，开启。

return false在toggler方法中非常重要＆gt;在这种情况下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>

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

3 个答案: