Javascript 数据切换属性如何工作？（它的 API 是什么？）

How does the data-toggle attribute work? (What's its API?)

提问by jpaugh

Bootstrap uses a custom attribute named data-toggle. How does this feature behave? Does using it require Bootstrap's JavaScript library? Also, which data-toggle options are available. So far, I count

Bootstrap 使用名为data-toggle. 此功能的表现如何？使用它是否需要 Bootstrap 的 JavaScript 库？此外，哪些数据切换选项可用。到目前为止，我数

• collapse
• tab
• modal
• dropdown

• 坍塌
• 标签
• 模态
• 落下

What do each of these do?

它们分别是做什么的？

TLDR; What's the API for bootstrap's custom data-toggleattribute?

TLDR；bootstrap 的自定义data-toggle属性的 API 是什么？

回答by rogergarrison

I think you are a bit confused on the purpose of custom data attributes. From the w3 spec

我认为您对自定义数据属性的目的有点困惑。来自w3 规范

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

自定义数据属性旨在存储页面或应用程序私有的自定义数据，没有更合​​适的属性或元素。

By itself an attribute of data-toggle=valueis basically a key-value pair, in which the key is "data-toggle" and the value is "value".

本身的属性data-toggle=value基本上是一个键值对，其中键是“数据切换”，值是“值”。

In the context of Bootstrap, the custom data in the attribute is almost useless without the context that their JavaScript library includes for the data. If you look at the non-minified version of bootstrap.jsthen you can do a search for "data-toggle" and find how it is being used.

在 Bootstrap 的上下文中，如果没有他们的 JavaScript 库为数据包含的上下文，属性中的自定义数据几乎是无用的。如果您查看bootstrap.js的非缩小版本，那么您可以搜索“data-toggle”并找到它的使用方式。

Here is an example of Bootstrap JavaScript code that I copied straight from the file regarding the use of "data-toggle".

下面是一个 Bootstrap JavaScript 代码的例子，我直接从文件中复制了关于“数据切换”的使用。

• Button Toggle

  Button.prototype.toggle = function () {
    var changed = true
    var $parent = this.$element.closest('[data-toggle="buttons"]')
  
    if ($parent.length) {
      var $input = this.$element.find('input')
      if ($input.prop('type') == 'radio') {
        if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
        else $parent.find('.active').removeClass('active')
      }
      if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
    } else {
      this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
    }
  
    if (changed) this.$element.toggleClass('active')
  }
  

• 按钮切换

  Button.prototype.toggle = function () {
    var changed = true
    var $parent = this.$element.closest('[data-toggle="buttons"]')
  
    if ($parent.length) {
      var $input = this.$element.find('input')
      if ($input.prop('type') == 'radio') {
        if ($input.prop('checked') && this.$element.hasClass('active')) changed = false
        else $parent.find('.active').removeClass('active')
      }
      if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
    } else {
      this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
    }
  
    if (changed) this.$element.toggleClass('active')
  }
  

The context that the code provides shows that Bootstrap is using the data-toggleattribute as a custom query selector to process the particular element.

代码提供的上下文显示 Bootstrap 正在使用该data-toggle属性作为自定义查询选择器来处理特定元素。

From what I see these are the data-toggle options:

从我看来，这些是数据切换选项：

• collapse
• dropdown
• modal
• tab
• pill
• button(s)

• 坍塌
• 落下
• 模态
• 标签
• 丸
• 纽扣）

You may want to look at the Bootstrap JavaScript documentationto get more specifics of what each do, but basically the data-toggleattribute toggles the element to active or not.

您可能想查看Bootstrap JavaScript 文档以获取每个功能的更多细节，但基本上该data-toggle属性会切换元素是否处于活动状态。

回答by Microshine

The data-* attributes is used to store custom data private to the page or application

data-* 属性用于存储页面或应用程序私有的自定义数据

So Bootstrap uses these attributes for saving states of objects

所以 Bootstrap 使用这些属性来保存对象的状态

W3School data-* description

W3School 数据-* 描述