一次只允许打开一个菜单 - React答案

【问题标题】：Only Allowing One Menu at a Time to be Opened - React一次只允许打开一个菜单 - React
【发布时间】：2020-06-03 10:09:47
【问题描述】：

前言：我是 React 和 JavaScript 的新手，所以在推荐使用方面请原谅格式或缺乏知识。

所以我使用 Tailwind UI 作为网站的基础，它带有这些导航菜单，它没有任何用于打开和关闭菜单的 CSS，完全依赖于 JavaScript。我已经让它工作如下所示，但现在我很难过如何防止一次打开一个菜单。我确实可以正常工作，但是在打开另一个菜单时单击另一个菜单时，它只是关闭了另一个菜单，并没有真正打开用户单击的实际菜单。下面是我的代码示例，也许有更好的方法来处理它？

编辑：有人建议在 CodeSandbox 中重新创建代码，所以你去吧。

https://codesandbox.io/s/sweet-goodall-5wn8r

【问题讨论】：

您能在 CodeSandbox 中重新创建您的代码吗？这样我们就有了一个可行的例子。
看起来代码框没有完全正常工作，您仍然需要编辑您的App.js 以显示默认代码以外的其他内容。
@Titulum 我做到了。您没有看到更新的代码吗？再试一次，对我来说效果很好。

标签： javascript reactjs

【解决方案1】：

看起来我可以通过在我的 NavBar 函数中使用以下内容来使其工作：

const [isOpen2, setIsOpen2] = useState(false);
const [isOpen1, setIsOpen1] = useState(false);
const toggle1 = () => {
   if (isOpen2) toggle2();
      setIsOpen1(!isOpen1);
   };
const toggle2 = () => {
   if (isOpen1) toggle1();
      setIsOpen2(!isOpen2);
   };

CodeSandbox 中的代码多次切换菜单，直到现在我才发现。希望这对使用 Tailwind UI 的其他人有所帮助！

【讨论】：

【解决方案2】：

我认为您正在尝试这样做。

https://codesandbox.io/s/festive-taussig-uh4lk

【讨论】：