Как мне закрыть гармошку? - PullRequest
Новая
       6

Как мне закрыть гармошку?

1 голос
/ 03 августа 2020

Нужны идеи для мозгового штурма, в основном, как вы можете видеть в коде, когда я щелкаю заголовок аккордеона, передается указатель заголовка. Аккордеон закрывается из-за свойства «активный» в имени класса. Теперь я хочу реализовать функцию, чтобы, если щелкнуть уже открытый аккордеон, он закроется. Я пробовал несколько вещей, но не нашел решения.

Заранее спасибо 

const Accordion = ({ accordionInfo }) => {
  const [open, setOpen] = useState(null);

  const onTitleClick = (index) => {
    setOpen(index);
  };

  const accordion = accordionInfo.map((info, index) => {
    const active = open === index ? 'active' : false;
    return (
      <div key={info.title}>
        <div className='ui styled accordion'>
          <div
            className={`${active} title`}
            onClick={() => onTitleClick(index)}>
            <i className='dropdown icon'></i>
            {info.title}
          </div>
          <div className={`${active} content`}>
            <p>{info.description}</p>
          </div>
        </div>
      </div>
    );
  });
  return <div>{accordion}</div>;
};

1 Ответ

2 голосов
/ 03 августа 2020

Я считаю, что установка open как null, если индекс такой же, как open, должна делать то, что вам нужно

Что-то вроде: 

const onTitleClick = (index) => {
    setOpen(index === open ? null : index);
};
...