Tailwind/Alpine.js手风琴点击切换按钮类与图标失效问题

云原生阿岚

2026-9-29

问题根因

点击事件中的open = open是无效赋值，完全没有修改open变量的状态，所以:class绑定的判断逻辑永远使用初始值true，不会发生类切换。
你当前手风琴的展开/收起逻辑完全是靠selected变量控制，单独维护的open状态和展开状态完全脱节，很容易出现状态不同步的问题。

修复方案

不需要单独维护open变量，直接复用selected的状态做判断即可，修改后的代码如下：

<div x-data="{selected:null}">
  <dl class="faqs mx-auto max-w-2xl">
    <!-- dt元素同步切换类的逻辑已添加 -->
    <dt :class="{ 'dt-open': selected == 1, 'dt-close': selected != 1 }">
      <span class="faq-q">Question</span>
      <button
        type="button"
        class="faq-toggle"
        @click="selected !== 1 ? selected = 1 : selected = null"
        :class="{ 'faq-open': selected == 1, 'faq-close': selected != 1 }"
      >
        <!-- 图标显示逻辑也绑定selected状态，无需额外写死hidden类 -->
        <span x-show="selected != 1">+</span>
        <span x-show="selected == 1">-</span>
      </button>
    </dt>
    <dd
      class="faq-a overflow-hidden transition-all max-h-0 duration-700"
      x-ref="container1" 
      x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''"
    >
      <div class="inner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.
      </div>
    </dd>
  </dl>
</div>