点击或触摸身体任何位置时关闭Jquery滑动菜单

Question

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

链接到我迄今所做的工作。 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();
    });


});

Answer 1

我感谢这是旧的，标记为已解决，但我只是偶然发现，当我查看点击结束事件。上面的答案是伟大的，但它也打开了菜单上的身体点击，这是一种克服了点的花哨汉堡按钮。下面是对上述代码的简单添加，它解决了这个问题。

$(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() {，这样以后的任何人都可以复制、粘贴和修改一些类名。