Как в dropdown меню открывать только тот список, по которому был клик?

Question

import './App.css';
import s from './NavWork/NavWork.css';
import iconDown from './img/down.png';
import iconUp from './img/up.png';
import React, { useRef } from "react";
import { useDetectOutsideClick } from "./NavWork/useDetectOutsideClick";

function App() {
  const [isActive, setIsActive] = useDetectOutsideClick(false);
  const onClick = () => {
  setIsActive(!isActive);
    
  }
  
  return (
   <>    
   <div className="NavWork">
   <ul id="accordion" className="accordion">
       <li>
         <div className="link" onClick={onClick}>archetecture
         <span> <img src={isActive ? iconUp : iconDown} claseName="arrow"/>
           </span></div>
         <ul
          className={`submenu ${isActive ? "active" : ""}`}
         >
           <li>interior</li>
           <li>exterior</li>
           <li>vr</li>
           <li>animation</li>
         </ul>
       </li>
       <li>
            <div className="link" onClick={onClick}>not archetecture
              <span>
               <img src={isActive ? iconUp : iconDown}/>
                </span></div>
              <ul 
          className={`submenu ${isActive ? "active" : ""}`}>
              <li>comercial</li>
              <li>exterior</li>
              <li>3D art</li>
              </ul>
            </li> 
       </ul>
    </div>
   </>
  );
}

export default App;

Answer 1

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [displayNum, setDisplayNum] = useState(false);
  const [displayChar, setDisplayChar] = useState(false);

  return (
    <div className="App">
      <ul>
        <li>
          <div onClick={() => setDisplayNum(!displayNum)}>Показать цифры</div>
          <ul className={displayNum ? "active" : "not-active"}>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        </li>
        <li>
          <div onClick={() => setDisplayChar(!displayChar)}>Показать буквы</div>
          <ul className={displayChar ? "active" : "not-active"}>
            <li>a</li>
            <li>b</li>
            <li>v</li>
          </ul>
        </li>
      </ul>
    </div>
  );
}

Пример

БЛОГ НА HUSL

Как в dropdown меню открывать только тот список, по которому был клик?

Ответы (1 шт):