单击时如何在此侧边栏中添加下拉菜单？

Question

我现在对如何在侧边栏中创建下拉菜单感到困惑，所以当我单击它时，应该显示或隐藏子菜单

Text

Answer 1

想法是添加一个隐藏和显示元素的类

sidebar.js

import React, { Fragment } from "react";
import "./style.css";

class sidebar extends React.Component {
  state = {
    isOpen: false,
  };

  toggleClass = (e) => {
    e.preventDefault();
    this.setState((prevState) => ({isOpen: !prevState.isOpen}));
  };

  render() {
    return (
      <div class="sidenav ">
        <a href="/">Retour a l'acceuil</a>
        <a href="/" onClick={this.toggleClass}>
          <span
            class="iconify hamburger"
            data-inline="false"
            data-icon="ic:round-menu"
          />
          Liste des élèves
          <span
            class="iconify down"
            data-inline="false"
            data-icon="bx:bxs-down-arrow"
          />
          </a>
        <div className={this.state.isOpen ? 'show': 'hide'} >
        <a href="/">
          <span
            class="iconify"
            data-inline="false"
            data-icon="ic:baseline-keyboard-arrow-right"
          />
          Item1
        </a>
        <a href="/">
          <span
            class="iconify"
            data-inline="false"
            data-icon="ic:baseline-keyboard-arrow-right"
          />
          Item2
        </a>
        <a href="/">
          <span
            class="iconify"
            data-inline="false"
            data-icon="ic:baseline-keyboard-arrow-right"
          />
          Item3
        </a>
        </div>

        <a href="/">Abscences</a>
        <a href="/">Inscription au concours</a>
        <a href="/">Résultat</a>
        <a href="/">Messagerie</a>
      </div>
    );
  }
}
export default sidebar;

style.css

...
.hide {
  display: none;
}

.show {
  display: block;
}