javascript - 较长网页上的下拉菜单

Question

我想像 this webpage 一样渲染一个下拉菜单这样当下拉菜单出现时，它会覆盖整个网页，删除滚动条，并卸载(？)网页的其余部分，但在此过渡期间您仍然会看到整个网页。我怎样才能实现这个功能？有没有办法卸载元素但仍然显示它们一段时间？谢谢!请查看下面的代码片段，了解与我目前正在做的事情类似的内容。

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>