总结
当用户点击汉堡包图标 className='.landing-page-hamburger'
需要点击两次才能切换导航 className='landing-page-nav-links'
我不知道为什么。
.landing-page-nav-links
的显示值在 CSS 中默认设置为 none
。
问题
导航栏需要点击两次来切换显示
值
预期结果
预计只需要一次点击
登陆页面.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;
最佳答案
发生这种情况是因为您的外部 CSS 没有在您的元素上设置 style
属性。第一次点击将其设置为 none
,因为它根本不存在。您的第二次点击现在将按预期工作。
要解决此问题,请内联设置 .landing-page-hamburger
的样式,或者只是切换类并让您的外部 CSS 处理它。
编辑: OP 提出了一个很好的问题。 .style
属性引用元素的 CSSStyleDeclaration目的。这是 HTMLElement您直接操作的界面。请注意,当您检查控制台中的元素时,CSSStyleDeclaration 不一定与您在从样式表获得的 CSS 中看到的相匹配。另外,请注意属性是 JS 风格的驼峰式大小写;这说明这不是直接映射,但它们都会影响元素。
所以我最初关于该属性根本不存在的描述是不准确的。它就在那里,并且被设置为空字符串,这是默认的 CSSStyleDeclaration。所以你在第二次点击时将它设置为“无”,然后一切顺利。您的初始 CSS 声明工作正常,但没有考虑到您的 if
语句,因为它不是指同一件事。效果相同,但您以不同的方式与您的元素交互。
关于javascript - REACT 导航栏需要点击两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46980071/