Question

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

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

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

使用jquery切换nav的数据属性

1 个答案: