Многоуровневое динамически вложенное раскрывающееся меню боковой панели не работает ⇐ CSS

[Anonymous]

У меня есть сборка боковой панели, и она работает нормально, но есть одна проблема: у меня есть 4 вложенных меню (например, Главное меню >> child1 >> child2 >> child3), и в этом я могу открыть до child2, как только я нажму на раскрывающийся список child3, он закроет child2 вместо открытия child3, так что, пожалуйста, помогите мне решить эту проблему, поскольку я новичок в кодировании . Кроме того, обратите внимание, что я хочу сохранять только одно меню одновременно динамически, если я открываю другое, то предыдущее должно закрываться автоматически, и это работает сейчас, пока меню child2, но chidl3 не открывается.

Ниже приведен код...

import React, { useState } из 'реагировать'; импортировать MsidebarItem из './MsidebarItem'; импортировать элементы из «./Msiderbar.json»; импортировать './Msidebar.css'; const Msidebar = () => { const [openMenu, setOpenMenu] = useState (null); const [isSubMenuOpen, setIsSubMenuOpen] = useState (null); const handleToggle = (индекс) => { setOpenMenu (индекс); }; const toggleSubMenu = (title) => { setIsSubMenuOpen((prev) => (prev === title ? null : title)); }; возвращаться ( {items.map((элемент, индекс) => ( handleToggle(индекс)} isSubMenuOpen={isSubMenuOpen} toggleSubMenu={toggleSubMenu} /> ))} ); }; экспортировать Msidebar по умолчанию; import React, { useEffect } из 'реагировать'; const MsidebarItem = ({ item, isOpen, onToggle, isSubMenuOpen, toggleSubMenu }) => { useEffect(() => { console.log(`Item: ${item.title}, isOpen: ${isOpen}, isSubMenuOpen: ${isSubMenuOpen}`); }, [пункт, isOpen, isSubMenuOpen]); const handleToggle = () => { onToggle(); toggleSubMenu(item.title); }; if (item.child1 || item.child2 || item.child3) { возвращаться ( {item.icon && } {item.title} {открыт && ( {item.child1 && item.child1.map((дочерний элемент, индекс) => ( ))} {item.child2 && item.child2.map((дочерний, индекс) => ( ))} {item.child3 && item.child3.map((дочерний элемент, индекс) => ( ))} )} ); } еще { возвращаться ( {item.icon && } {item.title} ); } }; экспортировать MsidebarItem по умолчанию; [ { "title": "Общий", "icon": "bi-gear-fill", "ребенок1": [ { "title": "Дом", "icon": "bi-house-fill", "путь": "/" }, { "title": "О программе", "icon": "bi-info-circle-fill", "путь": "/о" }, { "title": "Контакт", "icon": "заполнение двух телефонов", "ребенок2": [ { "title": "Фейсбук", "icon": "бифейсбук" }, { "title": "Биллинг", "ребенок3": [ { "title": "Оплата", "путь": "/Настройки/биллинг/платеж" }, { "title": "Подписка на подписку", "path": "/settings/billing/subscription" } ] }, { "title": "Твиттер", "icon": "би-твиттер" }, { "title": "Инстаграм", "icon": "би-инстаграм" } ] },{ "title": "Часто задаваемые вопросы", "icon": "заполнение двух телефонов", "ребенок2": [ { "title": "Фейсбук", "icon": "бифейсбук" }, { "title": "Биллинг", "ребенок3": [ { "title": "Оплата", "путь": "/Настройки/биллинг/платеж" }, { "title": "Подписка на подписку", "path": "/settings/billing/subscription" } ] }, { "title": "Твиттер", "icon": "би-твиттер" }, { "title": "Инстаграм", "icon": "би-инстаграм" } ] } ] }, { "title": "Учетная запись", "icon": "bi-info-circle-fill", "ребенок1": [ { "title": "Войти", "путь": "/логин" }, { "title": "Регистрация", "путь": "/регистрация" }, { "title": "Забыли пароль", "path": "/забыл-пароль" }, { "title": "Сбросить пароль", "path": "/reset-пароль" } ] }, { "title": "Профиль", "icon": "двойное заполнение", "ребенок1": [ { "title": "Профиль", "путь": "https://google.com" }, { "title": "Настройки", "ребенок2": [ { "title": "Учетная запись", "путь": "/настройки/учётная запись" }, { "title": "Биллинг", "ребенок3": [ { "заголовок": "Оплата", "путь": "/Настройки/биллинг/платеж" }, { "title": "Подписка на подписку", "path": "/settings/billing/subscription" } ] }, { "title": "Уведомления", "path": "/settings/notifications" } ] }, { "title": "Выход", "путь": "/выйти" } ] }, { "title": "Продвинутый", "icon": "список двухпросмотров", "ребенок1": [ { "title": "Поиск", "путь": "/поиск" }, { "title": "История", "путь": "/история" } ] }, { "title": "Поддержка", "icon": "заполнение круга двумя вопросами", "путь": "/поддержка" }, { "title": "Сообщить об ошибке", "icon": "би-ошибка", "path": "/report-bug" } ] .sidebar{ положение: фиксированное; верх: 52 пикселя; слева: 0; ширина: 290 пикселей; высота: 100вх; цвет фона: rgba(22, 22, 22, 1); переполнение-х: скрыто; z-индекс: 9999; радиус границы: 8 пикселей; гибкое сжатие: 0; } .sidebar-item{ отступы: .75em 1em; дисплей: блок; переход: цвет фона .15с; радиус границы: 5 пикселей; } .sidebar-item:hover{ цвет фона: rgba(255, 255, 255, .1); } .sidebar-title{ дисплей: гибкий; размер шрифта: 1.2em; оправдание-содержание: пространство между; цвет: #fff; курсор: указатель; переход: преобразование .3с; } .sidebar-title диапазон я { отображение: встроенный блок; ширина: 1,5ем; } .sidebar-item.open > .sidebar-title .toggle-btn{ преобразование: поворот (180 градусов); /* цвет фона: красный; */ } .sidebar-content{ отступ-верх: .25em; высота: 0; переполнение: скрыто; положение: относительное; переход: высота 0,15 с, легкость входа-выхода; } .sidebar-item.open > .sidebar-content{ высота: авто; } .sidebar-item.plain{ цвет: #fff; текстовое оформление: нет; } .sidebar-item.plain:hover{ оформление текста: подчеркивание; } .sidebar-item.plain я { отображение: встроенный блок; ширина: 1,7ем; } У меня есть сборка боковой панели, и она работает нормально, но есть одна проблема: я построил 4 вложенных меню (например, главное меню >> child1 >> child2 >> child3), и в этом я могу открыть до child2 как как только я нажимаю на раскрывающийся список child3, он закрывает child2 вместо открытия child3 (прикрепленное изображение, показывающее, что подменю выставления счетов не открывается, когда я нажимаю на него, оно закрывает контакт child2), так что, пожалуйста, помогите мне решить эту проблему, поскольку я новичок в кодировании. Кроме того, обратите внимание, что я хочу сохранять только одно меню одновременно динамически, если я открываю другое, то предыдущее должно закрываться автоматически, и это работает сейчас, пока меню child2, но chidl3 не открывается. Скриншот боковой панели