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

Question

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

• 坍方
• 标签
• 语气
• 落下

这些都做了什么？

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

Answer 1

我认为你对自定义数据属性的目的有点困惑.从W3规范

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

其本身的属性data-toggle=value基本上是键值对,其中键是"数据切换"而值是"值".

在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文档以获取每个内容的更多细节,但基本上该data-toggle属性将元素切换为活动或不活动.

Answer 2

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

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

W3School 数据-* 描述