javascript - REACT 导航栏需要点击两次

标签 javascript reactjs navigation navbar nav

总结

当用户点击汉堡包图标 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/

相关文章:

javascript - 小部件 iOS 14 使用 swift ui 创建具有 native react 的 ui

javascript - JavaScript中如何判断变量的类型?

javascript - 获取响应 &lt;style&gt; 标签并使用 React 将其附加到 head HTML 部分

javascript - 如何将对象迭代到平面列表中 - react native ?

silverlight - 如何清除 Silverlight/Windows Phone 7 中的导航历史记录?

javascript - JavaScript 函数的默认值在 JS Fiddle 中抛出错误

javascript - 如何使用 javascript 将选中的复选框值传递到下一页

javascript - 类型错误:无法读取未定义的属性 'number'

android - 导航回 Android 上的页面时,Xamarin.Forms 控件消失

html - 导航栏链接/元素与 CSS 大小相同