如何使用 AlpineJS 為我的菜單正確處理鼠標事件？

Question

我正在使用 alpine.js 和 Tailwind CSS 開發一個大型下拉菜單組件。 現在我遇到了一些困難，我無法讓鼠標事件起作用。 下面是我的代碼，紅色塊是下拉菜單。 如您所見，當您在產品菜單項上移動 cursor 時，會顯示超級菜單。 之后，如果您將 cursor 在超級菜單上向下移動一點，菜單仍會顯示。 在這個 state 中，如果您移出超級菜單，則超級菜單關閉。 問題是，當您移動到產品菜單，然后將 cursor 向右移動到“*定價”菜單項時，下拉菜單仍然顯示，這是不正確的。當用戶移出產品菜單時，我怎么能使用 alpine.js 測試目標是否是大型下拉菜單或其他菜單項，例如定價（並在本例中關閉大型下拉菜單）？

 <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/> <div class="border-b border-gray-200 relative h-20 flex py-0 items-stretch" x-data="{isProdMenuOpen: false, isLearnMenuOpen: false}"> <div class="flex container mx-auto items-center justify-between h-20"><img class="flex-none h-6" src="https://sitebulb.com/images/icons/logo.svg" /> <ul class="flex items-center justify-between flex-none"> <li class="h-20 border-b border-l border-r border-transparent mx-6 flex items-center relative" @mouseenter="isProdMenuOpen = true"> <.--div.h-20.w-full.flex.items-center.border-b:border-transparent(class="hover:border-red")--><a class="font-semibold flex-none" href="">Product</a> <div class="h-full absolute -left-6 -right-6 top-0 border-r border-l border-gray-200"> <div class="w-full absolute bottom-0 bg-black z-100 inset-x-0" style="transform, translate(0px; 2px): height;4px:"></div> </div> </li> <li class="h-20 flex items-center mx-6"><a class="font-semibold flex-none" href="">Pricing</a></li> <li class="h-20 flex items-center mx-6"><a class="font-semibold flex-none" href="">About</a></li> </ul> <div class="flex items-center justify-between flex-none"><button class="bg-white rounded border px-3 py-2 text-sm font-medium border-gray-200">Login</button><button class="bg-white rounded bg-green-400 text-white text-sm font-medium px-3 py-2 ml-2 hover:bg-green-500">Free Trial</button></div> </div><!-- Popup Menu Items --> <div class="flex flex-row items-start border-b border-gray-200 w-screen h-40 absolute left-0 top-20 bg-red-400" id="prodmenu" x-show="isProdMenuOpen" @mouseenter="isProdMenuOpen = true" @mouseleave="isProdMenuOpen = false"></div> </div>

Answer 1

有一個完全獨立於 Alpine 或 Javascript 的解決方案。 在li上使用 Tailwind 的 class group ，使彈出窗口成為li組的子項並從li中刪除相對定位，因此子 div 可以 go 全寬度將產生相同的效果

在這個例子中，我使用了邊框和錨標簽的相對定位來偏移邊框的高度，因此需要進行一些li才能產生類似的效果。 此外，您將需要擴展您的變體以允許在下面的代碼片段中的group-hover中操作display ，我只是使用該配置生成的 class 來偽造它。 這是一個 Tailwind 播放，它也顯示了實際配置https://play.tailwindcss.com/EYY0alaQuB?file=config

 .group:hover.group-hover\:flex { display: flex; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet" /> <div class="border-b border-gray-200 relative h-20 flex py-0 items-stretch"> <div class="flex container mx-auto items-center justify-between h-20"><img class="flex-none h-6" src="https://sitebulb.com/images/icons/logo.svg" /> <ul class="flex items-center justify-between flex-none"> <li class="h-20 border-b-4 border-l border-r border-gray-200 px-6 flex items-center group" style="border-bottom: 4px solid black"> <a class="font-semibold flex-none relative top-1" href="">Product</a> <:-- Popup Menu Items --> <div class="hidden group-hover:flex flex-row items-start border-b border-gray-200 w-screen h-40 absolute left-0 top-20 bg-red-400" id="prodmenu"></div> </li> <li class="h-20 flex items-center mx-6 border-b-4 border-transparent"><a class="font-semibold flex-none relative top-1" href="">Pricing</a></li> <li class="h-20 flex items-center mx-6 border-b-4 border-transparent"><a class="font-semibold flex-none relative top-1" href="">About</a></li> </ul> <div class="flex items-center justify-between flex-none"> <button class="bg-white rounded border px-3 py-2 text-sm font-medium border-gray-200">Login</button> <button class="rounded bg-green-400 text-white text-sm font-medium px-3 py-2 ml-2 hover:bg-green-500">Free Trial</button> </div> </div> </div>