Tengo un submenú que funciona solo cuando hay un solo elemento single LI pero si aumento LI , entonces no funciona bien. ¿Como puedo resolver esto?
Mi código:-
import React, { useState } from "react"; import { Link } from "react-router-dom"; const Home = (props) => { const [subMenuOpen, setSubMenuOpen] = useState(false); return ( <> <ul className="submenu"> <li> <Link to="/"> <div onClick={() => setSubMenuOpen(!subMenuOpen)} > <span>test</span> </div> </Link> <ul class={`sub-menu ${subMenuOpen ? "is-open" : ""}`}> <li className="menu-item">Sub-Item 1</li> <li className="menu-item">Sub-Item 2</li> <li className="menu-item">Sub-Item 3</li> </ul> </li> <li> <Link to="/"> <div onClick={() => setSubMenuOpen(!subMenuOpen)} > <span>test</span> </div> </Link> <ul class={`sub-menu ${subMenuOpen ? "is-open" : ""}`}> <li className="menu-item">Sub-Item 1</li> <li className="menu-item">Sub-Item 2</li> <li className="menu-item">Sub-Item 3</li> </ul> </li> </ul> </> ); }; export default Home; .sub-menu { display: none;} .sub-menu.is-open { display:block;}¡Gracias!
Debido a que tiene varios submenús, debe realizar un seguimiento de cuál está abierto, y no puede hacerlo con un solo valor bool.
Si solo tendrá 1 nivel de elementos de menú secundarios, y como máximo uno de ellos puede estar abierto, puede usar un número: -1 -> ningún subelemento está abierto, 0 -> el primer elemento está abierto, etc. como este :
const [subMenuOpen, setSubMenuOpen] = useState(-1);<div onClick={() => setSubMenuOpen(0)}><div onClick={() => setSubMenuOpen(1)}><ul class={`sub-menu ${subMenuOpen === 0 ? "is-open" : ""}`}><ul class={`sub-menu ${subMenuOpen === 1 ? "is-open" : ""}`}>setSubMenuOpen(-1) .Para obtener un comportamiento de alternancia, puede usar una función auxiliar como esta:
const toggleMenu = (x) => setSubMenuOpen(subMenuOpen === x ? -1 : x)<div onClick={() => toggleMenu(0)}><div onClick={() => toggleMenu(1)}>Si planea tener varios niveles de elementos de menú, una estructura de datos en forma de árbol será más adecuada, tal vez tanto para definir el menú como para realizar un seguimiento del ( sub ) (sub) ( sub ) elemento abierto.
intente usar "className" en lugar de "class" JSX parece ser correcto Creo que tiene un problema en css