Question

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

崩溃
标签
模态
下拉

这些都做了什么？

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

Answer 1

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

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

data-toggle=value的属性本身基本上是一个键值对，其中键是＆＃34;数据切换＆＃34;值为＆＃34;值＆＃34;。

在Bootstrap的上下文中，如果没有JavaScript库包含的数据上下文，属性中的自定义数据几乎无用。如果您查看非缩小版bootstrap.js，那么您可以搜索＆＃34;数据切换＆＃34;并找到它的使用方式。

以下是我直接从文件中复制的关于使用＆＃34; data-toggle＆＃34;的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 2

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

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

W3School data-* description

Answer 3

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

注意：目标元素必须有合适的引导类来执行动作

源操作：
data-toggle = collapse //切换类型
数据目标 = #myDiv

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

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

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

3 个答案:

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

3 个答案:

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