REACT导航栏需要两次点击

Question

摘要

当用户点击汉堡包图标className='.landing-page-hamburger'时，只需点击两下即可切换导航className='landing-page-nav-links'，我无法找出原因。

CSS中.landing-page-nav-links的显示值默认设置为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。所以你把它设置为＆＃34; none＆＃34;在第二次点击，从那里一切顺利。您的初始CSS声明工作正常，但没有计入您的if声明，因为它不是指同一件事。同样的效果，但您以不同的方式与您的元素进行交互。