jquery - 单击或触摸 body 任何地方时关闭 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

试试这个:

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');
});