时间戳

首页 > 解决方案 > 按下菜单切换时导航栏菜单不显示

css - 按下菜单切换时导航栏菜单不显示

问题描述

我的导航栏按照我想要的方式对齐，但是每当我按下菜单时，menu-toggle我的菜单都不会显示。任何帮助，将不胜感激。

导航.jsx：

export class Nav extends Component {

    state = {
        toggle: false
    }

    menuToggle = () => {
        this.setState({toggle: !this.state.toggle})
    }

render() {
    return (
        <nav>
            <ul>
                <li><a><Link to="/" className="homeNav">Home</Link></a></li>
                <li><a><Link to="/Converter" className="convertNav">Online Converter</Link></a></li>
                <li><a><Link to="/ihertz" className="ihertzNav">432hz App</Link></a></li>
                <li><a><Link to="/about" className="aboutNav">About Us</Link></a></li>
                <li><a><Link to="/why432" className="whyNav">Why 432Hz?</Link></a></li>
                <li><a><Link to="/contact" className="contactNav">Contact Us</Link></a></li>
                <li className="close" onClick={this.menuToggle}>X</li>   
            </ul>
        <div className="menu-toggle" onClick={this.menuToggle}><i className="fa fa-bars" aria-hidden="true"></i></div>
    </nav>    
  )
 }
}

导航.css：

.menu-toggle {
   display: none;
   color: #000;
   left: 45%;
   top: 20px;
   position: absolute;
   cursor: pointer;
   line-height: 50px;
   font-size: 24px;
}

@media (max-width: 728px) {
header ul {
  position: fixed;
  background: #1c72c9;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 99;
  transition: 0.5 linear;

}
  .menu-toggle {
  display: block;
  right: 30%;
}

header ul li {
  line-height: normal;
}


.close {
  display: block;
  font-size: 20px;
}

  header .headerLogo {
   width: 85px;
  
  }


 }

标签： cssreactjs

解决方案

You're not actually doing anything when you update this.state.toggle - you would need to change something in your render function to respond to this change. For instance:

const navStyle = { display: this.state.toggle ? 'block' : 'none' }

...

<nav style={navStyle}>

Or, you can add something like .show / .hide to your CSS:

.hide { display: none; }
.show { display: block; }

So you can use this in your HMTL:

let navClassName = this.state.toggle ? 'show' : 'hide';

...

<nav className={navClassName}>

推荐阅读