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

Answer 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() {，以便将来的任何人都可以复制，粘贴并进行一些类名更改。

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

2 个答案: