方法 - htmx.toggleClass()

htmx.toggleClass 是 HTMX 提供的一个客户端指令（client-side directive），用于在事件触发时切换（toggle）一个或多个 CSS 类名，而无需发送请求或写额外的 JavaScript 代码。

这属于 HTMX 的扩展行为（HX 属性或响应 header），可以直接在 HTML 中使用。相当于原生 JavaScript 中的 element.classList.toggle()。

参数

• elt - 切换类的元素
• class - 要切换的类名

使用方式

在 HTML 中使用

<button hx-get="/some-url" hx-target="#box" hx-swap="none" hx-toggle-class="active">切换样式</button>

在响应头中使用

HX-Toggle-Class: active on #box

在JavaScript 中使用

  // toggles the selected class on tab2
  htmx.toggleClass(htmx.find("#tab2"), "selected");

示例代码

<style>
  .highlight {
    background-color: yellow;
    border: 2px solid orange;
  }
</style>

<button 
  hx-get="/toggle" 
  hx-target="#box" 
  hx-swap="none" 
  hx-toggle-class="highlight on #box">
  切换高亮
</button>

<div id="box" class="p-2">
  我是目标内容区域
</div>

在这个例子中，当点击按钮时，发送 GET 请求到 /api，因为 hx-swap="none"，不会更新内容，但由于有 hx-toggle-class="highlight on #box"，HTMX 会切换 #box 元素上的 highlight 类，相当于触发了 document.querySelector('#box').classList.toggle('highlight')。

属性语法说明

hx-toggle-class="类名1 类名2 ... on 选择器"

多个类名用空格分隔，多个目标用逗号分隔：

hx-toggle-class="open active on #panel, .menu"