简体繁体 English

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

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

原文 2021-05-28 06:43:29 5 1 javascript/ html/ alpine.js

I'm trying to use AlpineJS to close and open dropdowns for my header NAV.我正在尝试使用 AlpineJS 为我的 header NAV 关闭和打开下拉菜单。 The header is responsive for large and mobile screens. header 适用于大屏幕和移动屏幕。 I'm able to get the header dropdown to work on large screens, but for some reason it does not work on mobile screens?我可以让 header 下拉菜单在大屏幕上工作，但由于某种原因它不能在移动屏幕上工作？ I'm basically using the exact same syntax and tried many others.我基本上使用完全相同的语法并尝试了许多其他语法。 Still no luck.仍然没有运气。 Maybe this is a bug?也许这是一个错误？ Could someone let me know if I'm in the wrong here?如果我在这里错了，有人可以告诉我吗？

Here is my CodeSandbox I'm using TailwindCSS and left everything in there for the most part to replicate my problem. 这是我正在使用 TailwindCSS 的 CodeSandbox ，大部分内容都留在了那里以复制我的问题。

Please note my mobile menu button is hidden on large screens, its on line 42请注意，我的移动菜单按钮隐藏在大屏幕上，位于line 42

The dropdown <div> that it's meant to open is on line 327它打算打开的下拉<div>位于第327行

Any solution to this?有什么解决办法吗？

1 个解决方案

it is working now, there was a problems with your buttons they were hidden behind other divs and not accessible in reality.它现在正在工作，您的按钮存在问题，它们隐藏在其他 div 后面，实际上无法访问。 i have even erased one button我什至删除了一个按钮

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