Question

这是下面的代码，滚动导航以更改其位置后（与导航滚动一样多），我需要dropMenu div。保持在（i）元素之下

    <nav>
     <ul>
      <li>
       <a onclick={this.setState(prevState => {showDropMenu:!prevState.showDropMeny})}>
        <i class="fas fa-ellipsis-h" /> 
       </a>
      </li>
      {showDropMenu &&<div className="dropMenu"></div> }
     </ul>
    </nav>

nav {
    overflow-y: visible;
    overflow-x: hidden;
    max-height: 70vh;
}
ul {
    list-style-type: none;
    min-width: 15vw;
    padding-left: 0;
}

我可以做些大改变还是小改变？

Answer 1

您可以看一下此示例https://www.w3schools.com/howto/howto_js_sticky_header.asp

下面您可以看到我用您的代码制作的快速示例

 class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          showDropMenu: true
        };
      }

      render() {
        return (
          <div className="App">
            <nav>
              <ul>
                <li>
                  <a
                    onClick={() =>
                      this.setState({ showDropMenu: !this.state.showDropMenu })
                    }
                  >
                    <i className="fas fa-ellipsis-h" /> Click Me
                  </a>
                </li>
                {this.state.showDropMenu && (
                  <div className="dropMenu">Drop Menu</div>
                )}
              </ul>
            </nav>
            <div className="content">
              Some Text Some Text Some Text Some Text Some Text
            </div>
          </div>
        );
      }
    }

    nav {
      background-color: blue;
      position: fixed;
      top: 0;
      width: 100%;
    }
    ul {
      list-style-type: none;
      min-width: 15vw;
      padding-left: 0;
    }

    .content {
      margin-top: 100px;
    }

在侧边栏父级外部显示下拉菜单，并在滚动时使菜单也根据其父级滚动，

1 个答案: