AlpineJS：如何为触发按钮添加样式类

你用x-transition来切换按钮样式是错误的——x-transition是给元素的显示/隐藏添加过渡动画的指令，不能用来动态绑定样式类。要实现按钮根据open状态切换样式，得用AlpineJS的动态类绑定功能，也就是x-bind:class（可简写为:class）。

正确实现方式 #

这里提供两种常用写法，按需选择：

1. 对象语法（逻辑清晰，推荐）

通过键值对定义：键是样式类名，值是触发该类的布尔条件

<div x-data="{ open: false }" class="flex">
  <button 
    type="button" 
    @click="open = ! open" 
    :class="{
      'border-indigo-600 text-indigo-600': open,
      'border-transparent text-gray-700 hover:text-gray-800': !open
    }" 
    aria-expanded="false"
  >
    Women
  </button>

  <div x-show="open" x-transition>
    My hidden text
  </div>
</div>

2. 数组语法（适合组合静态类与动态类）

通过三元表达式控制动态类，静态类可直接放在数组中

<div x-data="{ open: false }" class="flex">
  <button 
    type="button" 
    @click="open = ! open" 
    :class="[
      open ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-gray-700',
      'hover:text-gray-800'
    ]" 
    aria-expanded="false"
  >
    Women
  </button>

  <div x-show="open" x-transition>
    My hidden text
  </div>
</div>

关键注意点 #

• 你之前写的bordertransparent是拼写错误，Tailwind类名需用短横线分隔，正确写法为border-transparent
• 静态伪类样式（如hover:text-gray-800）可直接写在静态class属性中，也可纳入动态类的数组/对象里，两种方式均生效

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