css - 在 React 中展开和折叠 div

Question

下面的沙箱显示了两个展开和折叠的 div，我只是在测试一个模板。每个都将切换展开/折叠隐藏在右侧的 div。

我想要做的是，当您单击展开一个 div 时，另一个会折叠。添加该功能的最简单方法是什么？

非常感谢有关逻辑或使其工作的解决方案的任何建议。我正在考虑设置一个 handleClick 函数，当 div "x" 是活动 div 时关闭所有其他 div，但我不完全确定这里的逻辑或解决方案。将不胜感激任何帮助。

代码沙盒： https ://codesandbox.io/s/wandering-cherry-pk7xw ?file=/src/NavButton.js

谢谢你。

Answer 1

单击时切换菜单，同时关闭另一个菜单。

      <div className="iconBox">
        <div
          className="navIcon"
          onClick={() => {
            setToggle(!toggle);
            setToggle1(false);
          }}
        ></div>
      </div>
...
      <div className="iconBox2">
        <div
          className="navIcon"
          onClick={() => {
            setToggle1(!toggle1);
            setToggle(false);
          }}
        ></div>
      </div>

密码箱： https ://codesandbox.io/s/flamboyant-banzai-58snd