切换器 · Bootstrap 6.0 中文文档

Toggler 是一个纯 JavaScript 组件，可以用来避免编写小型或一次性 JavaScript 代码来创建交互元素。无需编写自定义 JavaScript，只需使用数据属性即可在 click 事件上切换属性值、更改类等。

示例

切换类

通过向元素添加data-bs-toggle="toggler"属性以及向你想要切换的值添加data-bs-value属性来切换元素的类。

点击切换 `fg-danger`

HTML

<div class="w-100 p-3 rounded border"
     data-bs-toggle="toggler"
     data-bs-value="fg-danger"
     data-bs-attribute="class">
  Click to toggle `fg-danger`
</div>

移除现有

如果元素已经拥有data-bs-value中指定的类，切换将移除它。再次点击会重新添加它。

以 `bg-subtle-info` 开头。点击以移除它。

HTML

<div class="w-100 p-3 rounded border bg-subtle-info"
     data-bs-toggle="toggler"
     data-bs-value="bg-subtle-info"
     data-bs-attribute="class">
  Starts with `bg-subtle-info`. Click to remove it.
</div>

目标元素

使用 data-bs-toggle 和 data-bs-target 来切换另一个元素的类。

使用按钮更改 `bg-2`

HTML

<button class="btn-solid theme-primary" data-bs-toggle="toggler" data-bs-target="#togglerExample1">Toggle</button>

<div id="togglerExample1" class="w-100 p-3 rounded border" data-bs-value="bg-2" data-bs-attribute="class">
  Use button to change `bg-2`
</div>

多个元素

使用 data-bs-toggle 使用类名选择器在 data-bs-target 切换多个元素的类。

使用按钮切换 `bg-subtle-info`

使用按钮切换 `bg-subtle-warning`

HTML

<button class="btn-solid theme-primary align-self-start"
        data-bs-toggle="toggler" data-bs-target=".togglerExampleClass1">Toggle</button>

<div class="w-100 p-3 rounded border togglerExampleClass1"
     data-bs-value="bg-subtle-info"
     data-bs-attribute="class">
  Use button to toggle `bg-subtle-info`
</div>

<div class="w-100 p-3 rounded border togglerExampleClass1"
     data-bs-value="bg-subtle-warning"
     data-bs-attribute="class">
  Use button to toggle `bg-subtle-warning`
</div>

切换属性

通过使用data-bs-toggle属性与data-bs-attribute和data-bs-value属性来切换属性。例如，切换hidden属性：

点击切换 `hidden` 属性

HTML

<div class="w-100 p-3 rounded border"
     data-bs-toggle="toggler"
     data-bs-value="true"
     data-bs-attribute="hidden">
  Click to toggle `hidden` attribute
</div>

你也可以使用这个来切换 disabled 在一个上的属性 fieldset 元素以禁用其中的所有控件。或者你能想到的带有属性的其他任何想法。

用法

通过数据属性

将 data-bs-toggle="toggler" 添加到元素以自动。data-bs-target 是可选的，该属性接受一个 CSS 选择器以应用切换器功能。请确保将 data-bs-attribute 和 data-bs-value 属性添加到被切换元素的标记中。

属性	描述
`data-bs-toggle="toggler"`	在触发元素上初始化切换器。
`data-bs-target`	可选的 CSS 选择器，用于指定其属性将被切换的元素。
`data-bs-attribute`	要切换的 HTML 属性名称（例如 `hidden`、`disabled`）。
`data-bs-value`	属性为“开启”状态时设置的值（通常在“关闭”时会移除）。

通过 JavaScript

我们不建议以编程方式使用此组件，因为它的初衷是为了避免使用 JavaScript。不过，你可以手动启用：

JavaScript

          var togglerElementList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="toggler"]'))
var togglerList = togglerElementList.map(function (togglerEl) {
  return new bootstrap.Toggler(togglerEl)
})

依赖项

如果你从源代码构建 Bootstrap 的 JS，切换器插件需要以下 JavaScript 文件：

文件	描述
`js/src/toggler.ts`	主切换组件
`js/src/base-component.ts`	基础组件类
`js/src/dom/data.ts`	元素数据存储
`js/src/dom/event-handler.ts`	事件处理工具
`js/src/dom/manipulator.ts`	数据属性操作
`js/src/dom/selector-engine.ts`	DOM选择器工具
`js/src/util/component-functions.ts`	共享组件助手
`js/src/util/config.ts`	配置基类
`js/src/util/index.ts`	核心实用功能

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-bs-，如data-bs-value="foo"所示。

名称	类型	默认值	描述
`attribute`	string	`class`	每次点击时将切换的属性
`value`	字符串、数字、布尔值、空	null	指定属性要切换的值，例如类名。当未设置值时，切换操作无效。

方法

你可以使用构造函数创建一个切换器实例，例如：

JavaScript

          var myToggler = document.getElementById('myToggler')
var bsToggler = new bootstrap.Toggler(myToggler)

方法	描述
`toggle`	切换所选切换器元素的属性
`getInstance`	静态方法，允许你获取与 DOM 元素关联的切换器实例
`getOrCreateInstance`	静态方法，允许你获取与 DOM 元素关联的切换器实例，或者在未初始化时创建一个新的实例

事件

Bootstrap 的 toggler 类提供了一些事件，用于接入 toggler 功能。

事件类型	描述
`toggle.bs.toggler`	当调用`toggle`实例方法时，会立即触发此事件。
`toggled.bs.toggler`	当实例的元素属性发生变化时，会触发此事件。

JavaScript

          var myToggler = document.getElementById('myToggler')
myToggler.addEventListener('toggle.bs.toggler', function () {
  // do something...
})