Ich habe Probleme beim Klicken auf das HeadlessUI-Popup-Menü, wenn ich ein Mobilgerät verwende oder die Seite in der Symbolleiste des Chrome-Geräts ansehe. Es scheint im normalen Desktop-Browsermodus gut zu funktionieren. Ich habe ein paar Stunden damit verbracht, in der Code-Sandbox zu testen und den Code auf seine einfachste Form zu reduzieren, die hier angezeigt und demonstriert werden kann:
https://codesandbox.io/s/react-tailwind-rive-animation-tap-issue-bxlt95?file=/src/App.js
Hier ist der relevante Teil des Codes:
<Popover className="z-5 relative"> {({ open }) => ( <> <div className="relative z-10"> <Popover.Button aria-label="Main menu" className="text-stone-500 focus:outline-none" > <div className="w-12 h-12"> <Bars3Icon /> </div> </Popover.Button> </div> <Transition as={Fragment} enter="transition ease-out duration-200" enterFrom="opacity-0 -translate-y-1" enterTo="opacity-100 translate-y-0" leave="transition ease-in duration-150" leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 -translate-y-1" > <Popover.Panel className="absolute right-0 z-10 mt-2 w-[250px] transform drop-shadow-2xl md:w-[600px] bg-white"> Popup Menu </Popover.Panel> </Transition> </> )} </Popover>
Ich versuche herauszufinden, was dazu führt, dass das Menü beim Klicken nicht wie normalerweise im Browser angezeigt wird. Vielen Dank im Voraus für Ihre Hilfe.
之前有人在另一个论坛回答了我的问题。问题是我的 div 捕获了点击,但没有将其传递给动画。通过将
style={{ pointerEvents: "none" }}
添加到菜单图标周围的 div,它再次开始工作。