单击或触摸正文中的任何位置时关闭 Jquery 滑动菜单答案

【问题标题】：Close Jquery Sliding Menu when clicked or touched anywhere in body单击或触摸正文中的任何位置时关闭 Jquery 滑动菜单
【发布时间】：2016-05-16 04:41:55
【问题描述】：

我需要从左侧创建一个滑动菜单。我已经成功创建了这个但是要关闭我们需要再次触摸/单击导航图标的菜单。当有人在菜单区域外触摸时，我需要菜单滑入。

链接到我到目前为止所做的事情。 http://rpinvestments.co.in/app/

以下是我的 JS 代码：

/*Main Navigation*/
$(function() {
    var html = $('html, body'),
        navContainer = $('.nav-container'),
        navToggle = $('.nav-toggle'),
        navDropdownToggle = $('.has-dropdown');

    navToggle.on('click', function(e) {
        var $this = $(this);
        e.preventDefault();
        $this.toggleClass('is-active');
        navContainer.toggleClass('is-visible');
        html.toggleClass('nav-open');
    });

    navDropdownToggle.on('click', '*', function(e) {
        e.stopPropagation();
    });


});

【问题讨论】：

stackoverflow.com/questions/25089297/… 参考这个

标签： jquery html

【解决方案1】：

试试这个：

jsFiddle Demo

var html = $('html, body'),
    navContainer = $('.nav-container'),
    navToggle = $('.nav-toggle'),
    navDropdownToggle = $('.has-dropdown');

navToggle.on('click', function(e) {
  var $this = $(this);
  e.preventDefault();
  e.stopPropagation(); //<-- Added This
  $this.toggleClass('is-active');
  navContainer.toggleClass('is-visible');
  html.toggleClass('nav-open');
});

navDropdownToggle.on('click', '*', function(e) {
  e.stopPropagation();
});

$('body').click(function(){ //<--- Added this section
    navToggle.toggleClass('is-active');
    navContainer.toggleClass('is-visible');
    html.toggleClass('nav-open');
});

【讨论】：

【解决方案2】：

我很欣赏这是旧的并标记为已解决，但我只是在查看点击关闭事件时偶然发现了这一点。上面的答案很好，但是它也会在点击身体时打开菜单，这有点违背了花哨的汉堡按钮的意义。这是解决此问题的上述代码的简单补充。

$(document).ready(function() {
var html = $('html, body'),
navContainer = $('.nav-container'),
navToggle = $('.nav-toggle'),
navDropdownToggle = $('.has-dropdown');

navToggle.on('click', function(e) {
var $this = $(this);
e.preventDefault();
e.stopPropagation();
$this.toggleClass('is-active');
navContainer.toggleClass('is-visible');
html.toggleClass('nav-open');
});

navDropdownToggle.on('click', '*', function(e) {
e.stopPropagation();
});

$('body').click(function(){
if (html.hasClass("nav-open")) { // -- added this line --
navToggle.toggleClass('is-active');
navContainer.toggleClass('is-visible');
html.toggleClass('nav-open');
} 
});
});

我还在开头添加了$(document).ready (function() {，这样以后的任何人都可以复制、粘贴并更改一些类名。

【讨论】：