Question

我正在尝试编写一个简单的jquery函数来为我的html添加类以进行屏幕外nav转换。我可以使用.toggleClass轻松完成此操作，但我想使用if语句，如果nav点击正文（导航以外的任何内容）将再次隐藏它。

我已经设置了demo codepen。谁能让我知道我哪里出错？

Answer 1

$('body !nav')

不是有效的选择器。你应该做的是为文档添加一个监听器：

$(document).click(function() {
  // Stuff you want to do on a click
});

这将捕获未由其他功能处理的所有点击。然后，捕获nav上发生的点击：

$("nav").click(function(e) {
  // Stuff that should happen when nav is clicked.
  e.stopPropagation();
});

Answer 2

这里要解决两件事：

1）在导航点击上使用stopPropagation()（Documentation）以避免注册正文（默认情况下事件会冒泡）：

$('nav').click(function(e) {
    e.stopPropagation();
});

2）使用:not选择器（Documentation）：

$('body:not(nav)').click(function(e) {
    if( $('nav').hasClass('active')){
        $('nav, #wrapper').removeClass('active');
    }
});

Updated Code Pen

Answer 3

试试这个：

$('a#menu').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  //this should just be .addClass but to demonstrate functionality I've left it as .toggleClass
  $('nav, #wrapper').toggleClass('active');


});


//how I want it to work

//on click of anything besides nav, if the active class is on the nav, take off the active class
$('body:not(nav)').click(function(e) {

  if( $('nav').hasClass('active')){
    $('nav, #wrapper').removeClass('active');
  }

});

jQuery Off Screen Nav

3 个答案: