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 object. This is a HTMLElement 接口。请注意，当您检查控制台中的元素时，CSSStyleDeclaration 不一定与您在 CSS 中看到的样式 sheet 匹配。另外，请注意属性是 JS 风格的驼峰式大小写；这说明这不是直接映射，但它们都会影响元素。

所以我最初关于属性根本不存在的描述是不准确的。它就在那里，并且设置为空字符串，这是默认的 CSSStyleDeclaration。所以你在第二次点击时将它设置为 "none"，然后一切顺利。您最初的 CSS 声明工作正常，但没有考虑到您的 if 声明，因为它不是指同一件事。效果相同，但您以不同的方式与元素交互。

REACT 导航栏需要点击两次

REACT nav bar requires two clicks

javascript

navigation

nav

navbar

reactjs

总结

问题

预期结果

LandingPage.js