AlpineJS @click.away 不会隐藏/删除元素

Question

我是 Alpine 的新手，我想知道为什么我的 @click.away 不起作用。它应该隐藏/删除页面中的下拉菜单。

Answer 1

事件监听器不应注册到 HTML

template

标记，因为 它不是有效的事件目标。

将其添加到

ul

标签中。

<ul 
@click.outside="isProfileMenuOpen = false"
x-transition:leave="transition ease-in duration-150" 
x-transition:leave-start="opacity-100" 
x-transition:leave-end="opacity-0" 
class="absolute right-0 w-48 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-md dark:border-gray-700 dark:text-gray-300 dark:bg-gray-700" 
aria-label="submenu"
>
<!-- ... -->
</ul>