javascript - 为什么使用 jQuery data();函数不是将数据属性赋值写入HTML吗？

Question

我读到使用 data- 属性触发 CSS 更改是一个很好的做法。我想要构建这个菜单，并且想在用户单击按钮时更改一些 CSS。

我有一些 CSS 规则设置为打开和关闭，我想根据数据属性进行切换。我正在 dom 节点上将 data-atrib 设置为 data-navtogle。

<div class="collapsing-navigation" data-navtoggle="closed">

我选择该 DOM 节点并将其值从“关闭”更改为“打开”。

menuMobile.navtoggle = 'open';

但它在 DOM 中保持不变，但是如果我在控制台中调用该属性，它会说它已打开。

console.log('current attr is ='+ menuMobile.navtoggle); //current attr is open

在控制台中它说它已打开，但在 DOMit 中它说它仍然关闭。

HTML

<nav class="navigation">
      <div class="navigation-header">Header
        <button type="button" class="menu-toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="hamburger-menu"></span>
          <span class="hamburger-menu"></span>
          <span class="hamburger-menu"></span>
        </button>
      </div>
      <div class="collapsing-navigation" data-navtoggle="closed">
        <ul>
          <li class=""><a href="#">Home</a></li>
          <li class=""><a href="#">About</a></li>
          <li class="">
            <a href="#">Solutions</a>
            <ul>
              <li class=""><a href="#">Sub 1</a></li>
              <li class=""><a href="#">Sub 2</a></li>
              <li class=""><a href="#">Sub 3</a></li>
            </ul>
            </li>
          <li class=""><a href="#">Mobile</a></li>
          <li class=""><a href="#">News</a></li>
          <li class=""><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>

Javascript:

$(function(){

  var menuToggle = $('.menu-toggle');
  var menuMobile = $('.collapsing-navigation');

  menuToggle.on('click',function(){

     if( menuMobile.data('navtoggle')==='closed' ){
       console.log("it was closed and im setting it to open");

       menuMobile.navtoggle = 'open';
       console.log('current attr is ='+ menuMobile.navtoggle);


     }
  });
});

CSS:

.collapsing-navigation[data-navtoggle=closed]
  height: 0

.collapsing-navigation[data-navtoggle=open]
  height: 100vh

.collapsing-navigation
  background-color: #00F
  height: 100vh
  position: relative
  z-index: 10

Answer 1

因为 jQuery 数据方法允许您设置任何值。如果必须将其转换为属性，那么它必须是字符串值(或可以转换为字符串的值)。

I have read it is a good practice to use the data- attribute to trigger CSS changes.

总的来说，我建议使用类会更好。

CSS 类选择器编写起来比较简单，jQuery addClass/removeClass 使用起来也很方便。