我怎样才能关闭手风琴？

Question

需要一些集思广益的想法，基本上正如您在代码中看到的那样，当我单击手风琴的标题时，索引将通过标题。由于 class 名称中的 'active' 属性，手风琴关闭。现在我想实现一个功能，如果你点击一个已经打开的手风琴，它就会关闭。我尝试了多种方法，但没有找到解决方案。

提前致谢

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>;
};

Answer 1

我认为如果索引与 open 相同，则将 open 设置为 null 应该可以满足您的需要

类似于：

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

我怎样才能关闭手风琴？

How could I make the accordion close?

javascript

reactjs

semantic-ui