Alpinejs 手风琴和点击切换

Question

我正在使用 Alpinejs 和 Tailwind。

我正在尝试在每个选项卡上创建一个带有切换的手风琴，但我希望该切换在用户单击以打开手风琴的每个部分时同时触发...这是我目前得到的：

  <ul class="block mb-4" x-data="{pay:null}">
    <li class="flex flex-col">
      <div @click="pay !== 'cc' ? pay = 'cc' : pay = null" class="cursor-pointer px-5 py-3 flex items-center bg-blue-50 border text-xl font-semibold border-blue-800 text-blue-800 inline-block hover:shadow rounded-t">
        <button type="button" class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 bg-gray-200" x-data="{ on: false }" aria-pressed="false" :aria-pressed="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-orange-500': on, 'bg-white': !(on) }">
          <span class="sr-only">Credit Card</span>
          <span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-0" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"></span>
        </button>
        <span class="ml-2">Credit / Debit Card</span>
      </div>
      <p x-show="pay == 'cc'" class="bg-white border-l border-r border-blue-800 py-4 px-2">
        This is made with Alpine JS and Tailwind CSS
      </p>
    </li>
    <li class="flex align-center flex-col">
      <h4 @click="pay !== 1 ? pay = 1 : pay = null" class="cursor-pointer px-5 py-3 bg-indigo-400 text-white text-center inline-block hover:opacity-75 hover:shadow hover:-mb-3">Accordion item 2</h4>
      <p x-show="pay == 1" class="border py-4 px-2">
        There's no external CSS or JS
      </p>
    </li>
    <li class="flex align-center flex-col">
      <h4 @click="pay !== 2 ? pay = 2 : pay = null" :class="{'cursor-pointer px-5 py-3 bg-indigo-500 text-white text-center inline-block hover:opacity-75 hover:shadow hover:-mb-3': true, 'rounded-b': pay != 2}">Accordion item 3</h4>
      <p x-show="pay == 2" :class="{'border py-4 px-2': true, 'rounded-b': pay == 2}">
        Pretty cool huh?
      </p>
    </li>
  </ul>

https://codepen.io/kennyk3/pen/eYBwEXN

Answer 1

我很绿，所以请耐心等待。我其实只是想发表评论，但没有足够的声誉。

首先，您需要从<button class> 中删除bg-gray-200，因为您正在为on: true 和on: false 状态绑定:class="{ bg-{color} }。另一个是 bg-orange-500 和 ring-orange-500 不是 Tailwind CSS 上定义的实用程序。也许你的意思是bg-yellow-500 和ring-yellow-500？除此之外，x-state 是什么？我在 Alpine.js 文档中找不到它。

好的，关于您提出的问题，您的代码实际上有 2 个问题。

1. 您希望parent 组件与child 组件通信，就像嵌套组件一样。 Alpine.js 不这样做。要么合并在 parent 组件中持有多个属性的两个组件，这样你就只有一个 x-data 或者你在 <div> 上的 $dispatch('customEvent') @click 事件（连同 pay 切换）并收听<button> 组件上的 @customEvent.window。

或者，您可以为$component/$parent 通信安装 Alpine Magic Helpers 或安装 Spruce 以保存所有状态。

1. 因为<button> 嵌套在<div> 中，所以每次@click 和<button> 时都会触发@click 事件。这就是为什么您的代码看起来像 <button> 组件与您的 <ul> 组件通信，这是不真实的。您正在触发两个不同的 @click 事件。由于这种行为，如果您从您的<div> 组件中$dispatch('customEvent') 并在您的<button> 上收听@customEvent.window，您最终将切换您的on 状态两次。尝试在<button> 上添加@click.debounce.250 和@customEvent.window，您会看到它来回切换。

至于这一点，您需要在收听@customEvent.window 时删除<button> 上的@click 事件，以便切换发生一次，或者最好合并两个x-data，使您的<ul> 拥有多个属性（您的<div> 上无需$dispatch('customEvent') 和<button> 上的@click，只需@click 上的<div> 一个@click。

在我的实现中，我让x-data 持有两者：

<ul class="block mb-4" x-data="{pay:null, on: false}">
  <li class="flex flex-col">
    <div @click="pay !== 'cc' ? pay = 'cc' : pay = null, on = !on" class="cursor-pointer px-5 py-3 flex items-center bg-blue-50 border text-xl font-semibold border-blue-800 text-blue-800 inline-block hover:shadow rounded-t">
      <button type="button" class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500" aria-pressed="false" :aria-pressed="on.toString()" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-yellow-500': on, 'bg-gray-200': !(on) }">
        <span class="sr-only">Credit Card</span>
        <span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-0" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"></span>
      </button>
      <span class="ml-2">Credit / Debit Card</span>
    </div>
    <p x-show="pay == 'cc'" class="bg-white border-l border-r border-blue-800 py-4 px-2">
      This is made with Alpine JS and Tailwind CSS
    </p>
  </li>
  <li class="flex align-center flex-col">
    <h4 @click="pay !== 1 ? pay = 1 : pay = null" class="cursor-pointer px-5 py-3 bg-indigo-400 text-white text-center inline-block hover:opacity-75 hover:shadow hover:-mb-3">Accordion item 2</h4>
    <p x-show="pay == 1" class="border py-4 px-2">
      There's no external CSS or JS
    </p>
  </li>
  <li class="flex align-center flex-col">
    <h4 @click="pay !== 2 ? pay = 2 : pay = null" :class="{'cursor-pointer px-5 py-3 bg-indigo-500 text-white text-center inline-block hover:opacity-75 hover:shadow hover:-mb-3': true, 'rounded-b': pay != 2}">Accordion item 3</h4>
    <p x-show="pay == 2" :class="{'border py-4 px-2': true, 'rounded-b': pay == 2}">
      Pretty cool huh?
    </p>
  </li>
</ul>

https://codepen.io/wanahmadfiras/pen/jOVgBrz

Answer 2

手风琴（以及其他组件）现在是官方AlpineJS documentation 的一部分。将它们用于完美的开箱即用手风琴。