REACT 导航栏需要点击两次

Question

总结

当用户点击汉堡图标className='.landing-page-hamburger' 时，需要点击两次才能切换导航className='landing-page-nav-links'，我不知道为什么。

.landing-page-nav-links 的显示值在 CSS 中默认设置为 none。

问题

导航栏需要单击两次才能切换display 值

预期结果

希望只需要一次点击

LandingPage.js

import React from 'react';

const LandingPage = () => {  
  const toggleNav = () => {
    const navLinks = document.querySelector('.landing-page-nav-links');

    if (navLinks.style.display === 'none') {
      navLinks.style.display = 'initial';
    } else {
      navLinks.style.display = 'none';
    }
  }

  return (
    <nav className='landing-page-nav'>
      <h1 className='take-notes-logo'>Take Notes</h1>
      <span className='landing-page-hamburger' onClick={() => toggleNav()}>☰</span>
      <ul className='landing-page-nav-links'>
        <li>Sign Up</li>
        <li>Log In</li>
      </ul>
    </nav>
  );
};

export default LandingPage;

Answer 1

发生这种情况是因为您的外部 CSS 没有在您的元素上设置 style 属性。第一次单击将其设置为none，因为它根本不存在。您的第二次点击现在将按预期工作。

要解决这个问题，要么设置 .landing-page-hamburger 内联样式，要么只是切换类并让您的外部 CSS 处理它。

编辑： OP 提出了一个很好的问题。 .style 属性引用元素的 CSSStyleDeclaration 对象。这是您直接操作的HTMLElement 接口。请注意，当您在控制台中检查元素时，CSSStyleDeclaration 不一定与您在从样式表中获得的 CSS 中看到的内容相匹配。另外，请注意属性是 JS 风格的 camelCase；这说明这不是直接映射，但它们都会影响元素。

所以我最初对该物业根本不存在的描述是不准确的。它就在那里，它被设置为空字符串，这是默认的 CSSStyleDeclaration。因此，您在第二次单击时将其设置为“无”，一切顺利。您最初的 CSS 声明工作正常，但没有考虑到您的 if 声明，因为它指的不是同一件事。效果相同，但您与元素的交互方式不同。