AlpineJS,我的 header 下拉菜单适用于大屏幕但不适用于移动响应菜单?

AlpineJS, my header dropdown works for large screens but not for the mobile responsive menu?

我正在尝试使用 AlpineJS 为我的 header NAV 关闭和打开下拉菜单。 header 响应大屏幕和移动屏幕。我可以让 header 下拉菜单在大屏幕上工作,但出于某种原因它在移动屏幕上不起作用?我基本上使用完全相同的语法并尝试了许多其他语法。仍然没有运气。也许这是一个错误?如果我在这里错了,有人可以告诉我吗?

Here is my CodeSandbox 我正在使用 TailwindCSS 并将大部分内容留在那里以复制我的问题。

请注意我的移动菜单按钮在大屏幕上是隐藏的,在 line 42

要打开的下拉菜单 <div> 在线 327

有什么解决办法吗?

现在可以使用了,您的按钮有问题,它们隐藏在其他 div 后面,实际上无法访问。我什至删除了一个按钮

https://codesandbox.io/s/async-field-os411?file=/index.html:0-16377&resolutionWidth=320&resolutionHeight=675