Quiero agregar la lógica de cerrar automáticamente un menú desplegable ya abierto, al abrir el otro menú. Por ejemplo, abrí el menú desplegable de función 1, y mientras hago clic en la función 2 para abrir, el menú desplegable de función 1 debería cerrarse y viceversa.
const [expand1, setExpand1] = useState(false); const [expand2, setExpand2] = useState(false); <ul> <li> <div onClick ={() => setExpand1(!expand1)}> <a onClick={() => openPane('1')} className="menu-item"> <span>Feature-1</span> <div className={`drop-down ${expand1 ? 'active' : ""}`}> <i class='bx bx-chevron-down'></i> </div> </a> </div></li> <li> <div onClick ={() => setExpand2(!expand2)}> <a onClick={() => openPane('2')} className="menu-item"> <span>Feature-2</span> <div className={`drop-down ${expand2 ? 'active' : ""}`}> <i class='bx bx-chevron-down'></i> </div> </a> </div> </li> </ul>Intente agregar funciones personalizadas como controladores onClick y maneje la lógica allí.
const [expand1, setExpand1] = useState(false); const [expand2, setExpand2] = useState(false); const toggle1 = () => { if(expand2) setExpand2(false) setExpand1(!expand1) } const toggle2 = () => { if(expand1) setExpand1(false) setExpand2(!expand2) } <ul> <li> <div onClick ={toggle1}> <a onClick={() => openPane('1')} className="menu-item"> <span>Feature-1</span> <div className={`drop-down ${expand1 ? 'active' : ""}`}> <i class='bx bx-chevron-down'></i> </div> </a> </div></li> <li> <div onClick ={toggle2}> <a onClick={() => openPane('2')} className="menu-item"> <span>Feature-2</span> <div className={`drop-down ${expand2 ? 'active' : ""}`}> <i class='bx bx-chevron-down'></i> </div> </a> </div> </li> </ul>Esto es muy sucio, pero demuestra la idea general.
Puede lograrlo usando el enfoque y el desenfoque. <div> no se puede enfocar automáticamente, por lo que debe darle la propiedad tabIndex para que se pueda enfocar.
<div tabIndex="0"> <p>Hello</p> </div> Ahora, el <div> es enfocable.
Lo que debe hacer a continuación es darle a <div> un onFocus y onBlur para ocultar o mostrar <div> .
const menuRef = React.useRef() const [focusedIndex, setFocusedIndex] = React.useState(null) const onFocus = (e, {index}) => setFocusedIndex(index) const onBlur = (e, {index}) => { setFocusedIndex(null) // you can implement your own logic here } return ( <div ref={menuRef}> { ['a', 'b'].map((val, i) => ( <div onFocus={(e) => onFocus(e, {index: i})} onBlur={(e) => onBlur(e,{index: i})} tabIndex="0" style={{display: focusedIndex === i ? 'block' : 'none'}} key={`${i}`} > <p>Hello</p> </div> ) } </div> )