使用 Alpine.js 从下拉列表中显示隐藏的元素

Question

我在一个网站上使用 Alpine.js，我希望有一个带有选项 show/hide 和 alpine 的下拉菜单，而且当你点击其中一个选项时，它 hides/shows 页面下方的内容块。

到目前为止我有这个：

<div x-data="{ open: false }">
  <button @click="open = !open">Dropdown</button>
  <ul
    x-show="open"
    @click.away="open = false"
  >
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
  </ul>
</div>

我该如何修改它，以便在我单击下拉选项时显示与其相关的元素？

好像x-data属性需要把被点击的元素和将要显示的元素都包裹起来，但是我无法在下拉列表中嵌套我想显示的附加内容项目。

Answer 1

It seems that the x-data attribute needs to wrap both the element that is clicked on and the element that will be shown, but I can't nest the additional content I want to show within the dropdown list items.

这是一种将 "selected element" 存储在同一个 Alpine.js 组件上的方法，显然您提到它不适合您的目的。

替代方法有两种，第一种是使用自定义事件在 Alpine.js 组件之间进行通信（这是唯一的 Alpine.js 本机方法）。第二种是使用 Spruce 包创建全局存储来共享状态。我不会在这里介绍 Spruce 方法，它应该包括在一个组件中设置全局存储状态并从另一个组件使用它。

要使用自定义事件，在下拉列表中单击链接（锚标记），您可以使用 $dispatch 魔法属性（它只是 CustomEvent/dispatchEvent) 以发送包含您希望的任何数据值的自定义事件（它们将存储在 customEvent.detail 下）。

在您的 "receiving" Alpine.js 组件中，您应该使用 .window 或 .document 修饰符在 window/document 上监听 "custom event"分别。当自定义事件的侦听器被触发时，您可以访问 $event.details（请注意 $event 是一个 "magic property"）并读取事件调度期间传递的任何数据。

<div x-data="{ open: false }">
  <button @click="open = !open">Dropdown</button>
  <ul
    x-show="open"
    @click.away="open = false"
  >
    <li><a href="#" @click="$dispatch('dropdown-select', { element: 'one' })">One</a></li>
    <li><a href="#" @click="$dispatch('dropdown-select', { element: 'two' })">Two</a></li>
  </ul>
</div>
<div x-data="{ selected: '' }" @dropdown-select.window="selected = $event.detail.element">
  <div x-show="selected === 'one'">One showing</div>
  <div x-show="selected === 'two'">Two showing</div>
</div>

你可以看到上面的例子在下面CodePen.

使用 Alpine.js 从下拉列表中显示隐藏的元素

Revealing hidden elements from a dropdown with Alpine.js

javascript

alpine.js