使用 jquery 切换导航的数据属性答案

【问题标题】：Toggle data attribute of nav with jquery使用 jquery 切换导航的数据属性
【发布时间】：2016-07-15 05:18:08
【问题描述】：

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

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

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

单击页面主体来切换导航

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

应该将值从show 切换到hide。我试过这个：

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

【问题讨论】：

标签： jquery

【解决方案1】：

您以错误的方式使用attr()-function 的回调。

您的$(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

【讨论】：

attr 的第二个参数可以是字符串或函数 - 我不相信他使用不正确。
@Tibrogargan 但$(this) 没有引用具有该属性的元素。在他的情况下，它指的是$('body')，这是错误的。我假设他想获取 elements 属性的当前值。我可以在我的回答中提到这一点，是的。
现在的问题是，当您单击其中一个导航链接时，它会将数据抽屉显示设置为隐藏。单击正文会显示单击时的导航，但释放鼠标会再次隐藏导航。
@user3438917 我认为这是因为nav 是body 的孩子，所以事件总是触发。我会更新我的答案
嗯，这仍然会导致导航在点击链接时打开和关闭：$('body').on('click touchstart',function(e){ if ($(e.target).is('nav')) { return false; } $( ".nav-header" ).attr( "data-drawer-display", function( i, val ) { return val === 'show' ? 'hide' : 'show'; }); });