data-toggle 属性是如何工作的？ （它的 API 是什么？）

Question

Bootstrap 使用名为 data-toggle 的自定义属性。此功能的行为如何？使用它需要 Bootstrap 的 JavaScript 库吗？此外，哪些数据切换选项可用。到目前为止，我数了

• 折叠
• 标签
• 模态
• 下拉菜单

它们各自的作用是什么？

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

Answer 1

data-toggle 属性通过给 Bootstrap 将要在目标元素上执行的切换操作的名称来告诉 Bootstrap 究竟要做什么。如果您指定折叠。这意味着引导程序将折叠或取消折叠您单击的操作的 data-target 指向的元素

注意：目标元素必须具有适当的类，以便引导程序执行操作

源动作：
data-toggle = collapse //切换类型
data-target = #myDiv

目标：
class=collapse //我可以折叠
id=myDiv

这对于其他类型的切换操作（如选项卡、模式、下拉菜单）也是如此

Answer 2

我认为您对自定义数据属性的用途有些困惑。来自w3 spec

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

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

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

这是我直接从文件中复制的有关“数据切换”使用的 Bootstrap JavaScript 代码示例。

• 按钮切换

  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')
  }
  

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

据我所知，这些是数据切换选项：

• 折叠
• 下拉菜单
• 模态
• 标签
• 丸
• 按钮

您可能想查看Bootstrap JavaScript documentation 以了解每个功能的更多细节，但基本上data-toggle 属性将元素切换为活动或不活动。

Answer 3

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

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

W3School data-* description