javascript - css - 扩展导航栏防止点击输入

Question

我有一个导航栏，当您单击它时它会扩展，但是当我尝试与输入和按钮交互时，我无法单击它们。我知道这是导航栏的问题，因为我尝试删除它并且网站运行良好。我认为我扩展它的方式存在问题，因为如果您转到 addNote 页面，最后一个输入框工作正常，但只有一半是可点击的。

https://postnote.herokuapp.com/addNote

这是菜单的CSS:

.menu{
  background: red;
  width:100%;
  min-height:10vh;
  position: fixed;
  left:0px;
  top:0px;
  z-index: 10;
  border-bottom: 0.4px solid #C0C5CD;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
.menu-item{
  font-size:0em;
  color:black;
  margin-top: 1.2vh;
  display:block;
  opacity:0;
  height: 0px;
  transition: 0.3s ease-in-out;
  border-bottom: 0.7px solid #C0C5CD;
  background:red;
  display: none;
}
.menu-item-extend{
  opacity:1;
  height: 5.5vh;
  font-size: 1.6em;
  display: block;
}
.noStyle{
  border: none;
}

这是菜单的 html(在 React v4 中):

import { Meteor } from "meteor/meteor"
import React from "react";
import { withRouter, Link } from "react-router-dom";

import { SubjectRoutes } from "../subjectRoutes/subjectRoutes";
import "../../../client/stylesheets/authentication.css"

class Menu extends React.Component{
  extendMenu(){
    let menuItems = document.querySelectorAll(".menu-item");
    for(let i = 0; i <= menuItems.length; i++ ){
      menuItems[i].classList.toggle("menu-item-extend") 
    }
    console.log(menuItems)
  }
  render(){
    return(
      <div className="center center-v-outer">
        <div className="menu center-v-inner" ref="menu" onClick={this.extendMenu.bind(this)}>
          <h1 className="menu-header">PostNote</h1>
          <p className="menu-item"><Link to="/">Home</Link></p>
          <p className="menu-item"><Link to="/searchNotes">Notes</Link></p>
          <p className="menu-item"><Link to="/addNote">Add a Note</Link></p>
          <p className="menu-item noStyle"><Link to={`/users/${Meteor.userId()}`} >My Profile</Link></p>
        </div>
      </div>
    );
  }
}
export default withRouter(Menu)

Answer 1

由于 .center-v-outer 上的“高度:50vh”，您的包装器 div.center.center-v-outer 正在覆盖表单。如果删除它，一切都会正常工作。

此外，您可能应该将菜单从表单中移出；)