Twitter Bootstrap中的数据切换属性

在这里，您还可以找到有关data-toggle可以分配的值的更多示例。只需访问该页面，然后CTRL+F搜索data-toggle。

它是Bootstrap定义的HTML5数据属性。它将按钮绑定到事件。

Bootstrap利用HTML5标准以便在javascript中轻松访问DOM元素属性。

数据-*

形成称为自定义数据属性的一类属性，这些属性允许专有信息在HTML及其可以由脚本使用的DOM表示形式之间交换。所有此类自定义数据都可以通过设置属性的元素的HTMLElement接口获得。HTMLElement.dataset属性提供对它们的访问。

参考

例如，假设您正在创建一个Web应用程序以列出和显示配方。您可能希望客户在选择要打开的食谱之前能够对列表进行排序，显示食谱的功能等。为此，您需要在食谱的列表元素内关联诸如烹饪时间，主要原料，进餐位置等内容。

<li><a href="recipe1.html">Borscht</a></li>
<li><a href="recipe2.html">Chocolate Mousse</a></li>
<li><a href="recipe3.html">Almond Radiccio Salad</a></li>
<li><a href="recipe4.html">Deviled Eggs</a></li>

为了使该信息进入页面，您可以做很多不同的事情。您可以为每个LI元素添加注释，可以为列表项添加rel属性，还可以根据时间，进餐和配料（即）将所有食谱放在单独的文件夹中。大多数开发人员采用的解决方案是使用类属性来存储有关当前元素的信息。这有几个优点：

• 您可以在一个元素上存储多个类
• 类名可以是人类可读的
• 使用JavaScript（className）访问类很容易
• 该类与其所在的元素相关联

但是此方法有一些主要缺点：

• 您必须记住课程的内容。如果您忘记了或新的开发人员接管了项目，则可能会删除或更改这些类，而不会意识到这会影响应用程序的运行方式。
• 类也用于CSS样式，您可能会错误地将CSS类与数据类重复，最终在您的实时页面上出现奇怪的样式。
• 添加多个数据元素更加困难。如果您有多个数据元素，则需要使用JavaScript以某种方式通过类的名称或类列表中的位置来访问它们。但是很容易搞砸。

All the other methods I suggested had these problems as well as others. But since it was the only way to quickly and easily include data, that’s what we did. HTML5 Data Attributes to the Rescue

HTML5 added a new type of attribute to any element—the custom data element (data-*). These are custom (denoted by the *) attributes that you can add to your HTML elements to define any type of data you want. They consist of two parts:

Attribute Name This is the name of the attribute. It must be at least one lowercase character and have the prefix data-. For example: data-main-ingredient, data-cooking-time, data-meal. This is the name of your data.

与其他任何HTML属性一样，您可以将数据本身包含在用等号分隔的引号中。该数据可以是网页上有效的任何字符串。例如：data-main-ingredient =“ chocolate”。

然后，您可以将这些数据属性应用于所需的任何HTML元素。例如，您可以在上面的示例列表中定义信息：

<li data-main-ingredient="beets" data-cooking-time="1 hour" data-meal="dinner"><a href="recipe1.html">Borscht</a></li>
<li data-main-ingredient="chocolate" data-cooking-time="30 minutes" data-meal="dessert"><a href="recipe2.html">Chocolate Mousse</a></li>
<li data-main-ingredient="radiccio" data-cooking-time="20 minutes" data-meal="dinner"><a href="recipe1.html">Almond Radiccio Salad</a></li>
<li data-main-ingredient="eggs" data-cooking-time="15 minutes" data-meal="appetizer"><a href="recipe1.html">Deviled Eggs</a></li>

在HTML中获得该信息后，就可以使用JavaScript进行访问，并根据该数据来操作页面。

任何以开头的data-属性都是用于某些特定目的的自定义属性的前缀（该目的取决于应用程序）。它被作为一种语义上的补救措施，用于人们rel出于原始目的以外的目的而大量使用和其他属性（rel通常用于保存诸如高级工具提示之类的数据）。

就Bootstrap而言，我不熟悉其内部工作原理，但从名称来看，我猜想这是一个钩子，可以切换可见性或它所附加元素的模式（例如可折叠Octopress.org上的侧边栏）。

html5doctor在data- attribute上有一篇不错的文章。

第2周期是广泛使用data-attribute的另一个示例。

从引导文档：

<!--Activate a modal without writing JavaScript. Set data-toggle="modal" on a 
controller element, like a button, along with a data-target="#foo" or href="#foo" 
to target a specific modal to toggle.-->

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

此数据属性的存在告诉Bootstrap在用户交互时在另一个元素的可视状态或逻辑状态之间切换。

它用于显示模式，选项卡内容，工具提示和弹出菜单，以及设置切换按钮的按下状态。没有清晰的文档，它有多种用法。

给出了这么多答案，但是并没有达到目的。让我们解决这个问题。

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

至此

1. data-HTML5解析器不会解析任何以开头的属性。
2. Bootstrap使用该data-toggle属性创建折叠功能。

使用方法：只需2个步骤

1. 添加class="collapse"到#A要折叠的元素。
2. 添加data-target="#A"和data-toggle="collapse"。

目的：如果使用Bootstrap，该data-toggle属性允许我们创建一个控件来折叠/展开div（块）。

这是一个HTML5数据属性，可自动将元素连接到其所属的小部件类型。

一些例子：

data-toggle="modal"
data-toggle="collapse"
data-toggle="dropdown"
data-toggle="tab"

遍历JavaScript文档并搜索data-toggle，您将在代码示例中看到它。

一个工作示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a href="#">Item</a></li>
  </ul>
</div>