Lo intenté pero no puedo. ¿Necesito crear una función separada para cada menú desplegable? Creo que debe haber una brevedad. Quiero que otros menús desplegables abiertos se cierren cuando el usuario haga clic en un menú desplegable. Espero que alguien pueda ayudarme. me tomó mucho tiempo todavía no pude encontrar ningún resultado. de esta manera agregaré 2 menús desplegables más.
import React, { useState } from "react"; export const AsideItems = () => { const [menuOpened, setMenuOpened] = useState(false); const [menuOpenedSecond, setMenuOpenedSecond] = useState(false); const handleMenu = () => { setMenuOpened((menuOpened) => !menuOpened); }; const handleMenuSecond = () => { setMenuOpenedSecond((menuOpenedSecond) => !menuOpenedSecond); }; return ( <> <li className="tree-item"> <a className="tree-link" href="/"> Computers & Laptops </a> <span onClick={handleMenu} className={`list-icon${menuOpened ? " " : " open-list"}`} > + </span> <span onClick={handleMenu} className={`list-icon${menuOpened ? " open-list" : " "}`} > - </span> <div className={`sub-menu${menuOpened ? " open-sub" : " "}`}> <ul className="sub-nav"> <li className="sub-item"> <a href="/" className="sub-link"> Computer Accessories </a> </li> </ul> </div> </li> <li className="tree-item"> <a className="tree-link" href="/"> Game Consoles </a> <span onClick={handleMenuSecond} className={`list-icon${menuOpenedSecond ? " " : " open-list"}`} > + </span> <span onClick={handleMenuSecond} className={`list-icon${menuOpenedSecond ? " open-list" : " "}`} > - </span> <div className={`sub-menu${menuOpenedSecond ? " open-sub" : " "}`}> <ul className="sub-nav"> <li className="sub-item"> <a href="/" className="sub-link"> Consoles </a> </li> </ul> </div> </li> </> ); };En lugar de utilizar varios valores de estado booleanos, puede utilizar un único valor de estado que contenga el nombre (o índice) del menú abierto. De esta manera, solo necesita una variable de estado y solo se puede abrir un menú a la vez. Para indicar que no hay ningún menú abierto, puede establecer el valor de estado en null .
Aquí hay un ejemplo:
const menuNames = { first: "first", second: "second", // ... } export const AsideItems = () => { const [openMenuName, setOpenMenuName] = React.useState(null); return ( <> <span onClick={() => setOpenMenuName(menuNames.first)} className={`list-icon${openMenuName === menuNames.first ? " " : " open-list"}`} > + </span> <span onClick={() => setOpenMenuName(menuNames.second)} className={`list-icon${openMenuName === menuNames.second ? " " : " open-list"}`} > + </span> </> ) }Tenga en cuenta que no tiene que definir un objeto que contenga los nombres de los menús, pero es más seguro que usar cadenas literales.