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

Posted 2023-02-22

【中文标题】data-toggle 属性是如何工作的？ （它的 API 是啥？）

【英文标题】：How does the data-toggle attribute work? (What's its API?)data-toggle 属性是如何工作的？ （它的 API 是什么？）

【发布时间】：2015-08-18 05:54:35

【问题描述】：

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

折叠 标签 模态 下拉菜单

它们各自的作用是什么？

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

【问题讨论】：

是的，它需要 bootstrap.js 库才能工作

没有一个符合我想要的答案：真的，我想我想要的是Documentation，所以我会去request a topic。

另外，这个问题收到了大量的流量，但没有投票。我打算删除它，但现在将其留在这里，以供文档主题请求页面参考。

是的......大量的流量和@rogergarrison 的一个很好的答案应该被接受。他可能无法读懂你的想法，但他很好地回答了提出的问题。

但是授予 rogergarrison 绿色复选标记并不 [hard]。 ;^) 100% 同意@ChronoFish。如果您想要文档但没有文档，则必须接受此处给出的 Roger 的“文档”... ”或“42”之类的。说“这是一个无法回答的问题”对他（或我们）的回答没有帮助。在它是可回答的范围内，he's answered。通过接受来结束问题。如果出现更好的情况，您可以移动支票。

【参考方案1】：

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

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

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

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

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

【参考方案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 属性将元素切换为活动或不活动。

【讨论】：

是的。那是我的问题。 （你是在改写这个问题，而不是回答它。）我最想要的是一个“规范”的地方来记录引导程序的这个特性。

我怎么没有回答呢？ 1) 是的，它需要 JavaScript 才能使用切换。 2) 该功能是在 JavaScript 中使用属性作为查询选择器实现的，请参阅代码示例 3) 给出数据切换可以具有的值列表 4) API 文档位于 Bootstrap JavaScript Documentation。一个规范的地方是 JavaScript 文件本身。没有比这更规范的了。

仅供参考：我想要的不适合Stack Overflow。相反，我创建了一个文档请求over here。

请记住“按钮”和“按钮”附加不同的插件。

【参考方案3】：

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

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

W3School data-* description

【讨论】：

是的。我在我的问题中提到了这一点。

我对 Bootstrap 使用这些提供的 API 更感兴趣。文档没有这样说明。

仅供参考：我想要的不适合Stack Overflow。相反，我创建了一个文档请求over here。