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

Question

我正在使用 alpine.js 和 Tailwind CSS 开发一个大型下拉菜单组件。现在我遇到了一些困难，我无法让鼠标事件起作用。下面是我的代码，红色块是下拉菜单。如您所见，当您在产品菜单项上移动光标时，会显示超级菜单。之后，如果您在超级菜单上将光标向下移动一点，菜单仍会显示。在这种状态下，如果您移出超级菜单，则超级菜单关闭。问题是当您移动到产品菜单，然后将光标向右移动到 *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>

标签： javascriptmouseeventalpine.js

Answer 1

有一个完全独立于 Alpine 或 Javascript 的解决方案。在 上使用 Tailwind 的group类li，使弹出窗口成为组的子项li并从 中删除相对定位，li以便子 div 可以全宽将产生相同的效果，我相信您正在寻找并完全由 CSS 控制。

需要进行一些捏造才能产生类似的效果，就像您li在此示例中使用不同颜色的下划线所做的那样，我使用了边框和锚标记的相对定位来偏移边框的高度。此外，您将需要扩展您的变体以允许在下面的代码片段display中进行操作，group-hover我只是使用该配置生成的类来伪造它。这是一个显示实际配置的 Tailwind 播放https ://play.tai​​lwindcss.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>