如何在Alpine JS中点击元素外部关闭下拉菜单

要实现点击下拉菜单外部区域关闭所有下拉，同时保留原有按钮切换功能，只需要利用Alpine JS的x-on:click.outside指令即可，核心改动如下：

修改后的完整代码 #

<nav x-data="{ openDropdown: null }" x-on:click.outside="openDropdown = null">
  <div class="mx-auto h-20 max-w-7xl px-2 sm:px-6 lg:px-8">
    <ul>
      <li x-data="{ id: 'products' }">
        <button x-on:click="openDropdown = openDropdown === id ? null : id" type="button" class="inline-block text-white hover:text-secondary-200 px-3 py-2 text-base font-medium">
          Products
        </button>
        <template x-if="openDropdown === id">
          <div>
            ...
          </div>
        </template>
      </li>
      <li>
        <a href="/" class="inline-block text-white hover:text-secondary-200 px-3 py-2 text-base font-medium">
          Integrations
        </a>
      </li>
      <li x-data="{ id: 'features' }">
        <button x-on:click="openDropdown = openDropdown === id ? null : id" type="button" class="inline-block text-white hover:text-secondary-200 px-3 py-2 text-base font-medium">
          Features
        </button>
        <template x-if="openDropdown === id">
          <div>
            ...
          </div>
        </template>
      </li>
    </ul>
  </div>
</nav>

关键说明 #

• 外部点击关闭逻辑：给<nav>元素添加x-on:click.outside="openDropdown = null"（可简写为@click.outside="openDropdown = null"），当点击导航区域之外的任意位置时，会将openDropdown重置为null，所有下拉菜单都会关闭。
• 保留原有切换功能：原按钮的点击逻辑保持不变，依然可以切换对应下拉菜单的显示/隐藏，且同一时间仅能打开一个下拉的逻辑不受影响。
• 内部点击不触发关闭：Alpine JS会自动处理事件冒泡，导航内部的按钮点击、下拉菜单内的操作不会触发click.outside事件，避免误关闭。

内容的提问来源于stack exchange，提问作者Ryan H