如何使用 AlpineJS 为我的菜单正确处理鼠标事件？

Question

我正在使用 alpine.js 和 Tailwind CSS 开发一个大型下拉菜单组件。现在我遇到了一些困难，我无法使鼠标事件起作用。下面是我的代码，红色块是下拉菜单。如您所见，当您将光标移动到 Product 菜单项上时，会显示大型菜单。之后，如果您将光标在大型菜单上向下移动一点，菜单仍会显示。在此状态下，如果您移出大型菜单，则大型菜单将关闭。问题是，当您转到 Product 菜单，然后将光标向右移动到 *Pricing" 菜单项时，下拉菜单仍然显示，这是不正确的。当用户移出 Product 菜单，我如何测试目标是大型下拉菜单还是其他菜单项，如 Pricing（并关闭大型下拉菜单在这种情况下）使用 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 的 group class，使弹出窗口成为组 li 的子项，并从 li 中删除相对定位，因此子项 div can go full width will give the same effect I believe you are looking for and fully controlled by CSS.

需要进行一些修改才能产生与您在 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>

如何使用 AlpineJS 为我的菜单正确处理鼠标事件？

How to properly handle mouse events with AlpineJS for my menu?

javascript

mouseevent

alpine.js