较长网页上的下拉菜单

Question

我想像此网页一样呈现一个下拉菜单，以便当该下拉菜单覆盖整个网页时，删除滚动条，并卸载（？）网页的其余部分，但是在此过渡期间，您仍然查看整个网页。 我将如何实现此功能？ 是否有某种方式可以卸载元素，但仍会显示一段时间？ 谢谢！ 请查看下面的代码片段，以获取与我目前正在工作的内容类似的内容。

 class Comp extends React.Component { constructor() { super(); this.state = { clicked: false, divId: "off" } this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({clicked: !this.state.clicked}); if (this.state.divId == "on") { this.setState({divId: "off"}); } else { this.setState({divId: "on"}); } } render() { return ( <div> <div id={this.state.divId}></div> <button onClick={this.handleClick}>Click Me</button> <div id="div1"></div> <div id="div1"></div> <div id="div1"></div> <div id="div1"></div> <div id="div1"></div> </div> ); } } ReactDOM.render(<Comp />, app); 

 #div1 { background-color: red; height: 100px; width: 100px; margin-bottom: 15px; } button { position: absolute; z-index: 2; } #on { background-color: green; position: absolute; transition: height ease 0.5s; z-index: 1; width: 100%; height: 100%; } #off { background-color: green; position: absolute; z-index: 1; transition: height ease 0.5s; width: 100%; height: 0%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"></div> 

Answer 1

隐藏和显示滚动条。 请参阅代码中的注释。

 class Comp extends React.Component { constructor() { super(); this.state = { clicked: false, divId: "off" } this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({clicked: !this.state.clicked}); if (this.state.divId == "on") { this.setState({divId: "off"}); document.body.classList.remove("scrollbar-hide");//Remove CSS class } else { this.setState({divId: "on"}); document.body.classList.add("scrollbar-hide"); //Add CSS class } } render() { return ( <div> <div id={this.state.divId}></div> <button onClick={this.handleClick}>Click Me</button> <div id="div1"></div> <div id="div1"></div> <div id="div1"></div> <div id="div1"></div> <div id="div1"></div> </div> ); } } ReactDOM.render(<Comp />, app); 

 #div1 { background-color: red; height: 100px; width: 100px; margin-bottom: 15px; } button { position: absolute; z-index: 2; } #on { background-color: green; position: absolute; transition: height ease 0.5s; z-index: 1; width: 100%; height: 100%; } #off { background-color: green; position: absolute; z-index: 1; transition: height ease 0.5s; width: 100%; height: 0%; } /* CSS class to remove scrollbar. */ .scrollbar-hide { overflow: hidden; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"></div>