jquery - 使用jquery切换nav的数据属性

Question

我有一个带有数据属性的导航标题

<nav class="nav-header" data-drawer-display="show" data-drawer-num="0">

使用 data-drawer-display="" 将导航的显示设置为在单击导航链接时显示或隐藏。我需要能够通过单击页面正文来切换导航

$("body").on("click", function(){});

应该将值从显示切换到隐藏。我已经尝试过:

$('body').on('click touchstart',function(e){
    $( ".nav-header" ).attr( "data-drawer-display", function( i, val ) {
      return val === 'show'?'hide':'show';
});

但逻辑似乎不对。

解决方案

下面是 @empiric 的修改版本:

$('body').on('touchstart', function(e){
 //keeps nav from closing when clicking in subnav and links
 if ($(e.target).is('.opener, .nav-sub, a')) {
      console.log(target);
      return false;
  }
 //if subnav is open, close on body click.
 $( ".nav-header" ).attr( "data-drawer-display", function( i, val ) {
      return val === 'show' ? 'hide' : '';
      });
});

Answer 1

您正在使用 attr() 的回调-以错误的方式运行。

您的$(this)不会引用元素$('.nav-header')。在函数作用域中，它引用的是 $('body')，它没有属性 data-drawer-display。

$( ".nav-header" ).attr( "data-drawer-display", function( i, val ) {
  return val === 'show'?'hide':'show';
});

应该适合你。

<小时/>

<强> Example

编辑

为了避免在单击时关闭nav(通过事件传播)，您可以检查单击的元素:

if ($(e.target).is('nav')) {
    return false;
}

<强> Example 2