Pop timbul HeadlessUI tidak boleh diklik pada peranti mudah alih
P粉848442185
P粉848442185 2023-09-06 12:27:55
0
1
455

Saya menghadapi masalah cuba mengklik menu pop timbul HeadlessUI apabila menggunakan peranti mudah alih atau melihat halaman dalam bar alat peranti Chrome. Nampaknya berfungsi dengan baik dalam mod penyemak imbas desktop biasa. Saya menghabiskan beberapa jam menguji dalam kotak pasir kod dan menyuling kod ke bentuk yang paling mudah, yang boleh dilihat dan ditunjukkan di sini:

https://codesandbox.io/s/react-tailwind-rive-animation-tap-issue-bxlt95?file=/src/App.js

Ini ialah bahagian kod yang berkaitan:

<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>

Saya cuba memikirkan apa yang menyebabkan menu tidak muncul seperti biasa dalam penyemak imbas apabila diklik. Terima kasih terlebih dahulu atas bantuan anda.

P粉848442185
P粉848442185

membalas semua(1)
P粉459440991

Seseorang menjawab soalan saya di forum lain sebelum ini. Masalahnya ialah div saya menangkap klik tetapi tidak menghantarnya ke animasi. Dengan menambahkan style={{ pointerEvents: "none" }} pada div di sekeliling ikon menu ia mula berfungsi semula.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!