侧边栏嵌套下拉菜单 Reactjs

Question

我试图在侧边栏上从头开始构建一个嵌套的下拉菜单。

问题是当我打开一个嵌套菜单时，它会同时打开边栏中的所有嵌套菜单，我应该如何设法只打开目标菜单？

顺便说一句，如果有更好更整洁的模式，请告诉我。预先感谢您提供见解。

import React, { useState } from "react";
import dropIcon from "./../../assets/dropArrow.svg";
import "./styles.scss";

const PhoneNavigation = ({ openSideBar }) => {
  const [openSub, setOpenSub] = useState(false);

  const handleOpenSubMenu = (e) => {
    if (!openSub) {
      setOpenSub(true);
      e.target.previousElementSibling.firstElementChild.classList.add(
        "show_sub_menu"
      );
    } else {
      setOpenSub(false);
      e.target.previousElementSibling.firstElementChild.classList.remove(
        "show_sub_menu"
      );
    }
  };

  return (
    <nav className={openSideBar ? "side_bar show_side_bar" : "side_bar"}>
      <ul>
        <div className="side_bar_item">
          <li className="side_bar_link">
            Courses
            <div className="sub_menu_box">
              <ul>
                <li className="sub_menu_link">Online</li>
                <li className="sub_menu_link">Schedule</li>
                <li className="sub_menu_link">Private</li>
                <li className="sub_menu_link">Classes</li>
              </ul>
            </div>
          </li>
          <img
            onClick={handleOpenSubMenu}
            src={dropIcon}
            alt="dropdown-menu-icon"
          />
        </div>
        <div className="side_bar_item">
          <li className="side_bar_link">
            About us
            <div
              className={
                openSub ? "sub_menu_box show_sub_menu" : "sub_menu_box"
              }
            >
              <ul>
                <li className="sub_menu_link">FAQ</li>
                <li className="sub_menu_link">Qualifications</li>
                <li className="sub_menu_link">Contact us</li>
              </ul>
            </div>
          </li>
          <img
            onClick={handleOpenSubMenu}
            src={dropIcon}
            alt="dropdown-menu-icon"
          />
        </div>
        <div className="side_bar_item">
          <li className="side_bar_link">
            About us
            <div
              className={
                openSub ? "sub_menu_box show_sub_menu" : "sub_menu_box"
              }
            >
              <ul>
                <li className="sub_menu_link">FAQ</li>
                <li className="sub_menu_link">Qualifications</li>
                <li className="sub_menu_link">Contact us</li>
              </ul>
            </div>
          </li>
          <img
            onClick={handleOpenSubMenu}
            src={dropIcon}
            alt="dropdown-menu-icon"
          />
        </div>
      </ul>
    </nav>
  );
};

export default PhoneNavigation;

// 样式表

$base-color: #081a45;
$base-color2: #00aae7;

.side_bar {
  position: fixed;
  background-color: white;
  top: 100px;
  width: 100%;
  height: 100%;
  z-index: 99;
  transform: translate(-100%);
  transition: all 5s ease-in;

  .side_bar_item {
    display: flex;
    width: 90%;
    align-items: center;
    margin: 20px auto;
    border-bottom: 1px solid $base-color;
    padding-bottom: 30px;
    position: relative;

    li {
      list-style: none;
    }
    .side_bar_link {
      color: $base-color;
      font-weight: bold;

      .sub_menu_box {
        position: relative;
        left: 20px;
        width: 300px;
        display: none;

        .sub_menu_link {
          margin: 8px 0;
          font-size: 0.9rem;
          color: $base-color2;
          font-weight: normal;
        }
      }
      .show_sub_menu {
        display: block;
      }
    }
    img {
      position: absolute;
      cursor: pointer;
      width: 15px;
      top: 5px;
      left: 95%;
    }
  }
}

.show_side_bar {
  transform: translate(0);
  transition: all 5s ease-in;
}