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

数据- *

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

参考

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) 类与它所在的元素相关联

但是这种方法有一些主要的缺点:

You have to remember what the classes do. If you forget or a new developer takes over the project, the classes might be removed or changed without realizing that that affects how the application runs. Classes are also used for styling with CSS, and you might duplicate CSS classes with data classes by mistake, ending up with strange styles on your live pages. It’s more difficult to add on multiple data elements. If you have multiple data elements, you need to access them in some way with your JavaScript, either by the name of the class or the position in the class list. But it’s easy to mess up.

我建议的所有其他方法都存在这些问题。但由于这是快速而简单地包含数据的唯一方法，所以我们就这么做了。 HTML5数据属性救星

HTML5为任何元素添加了一种新类型的属性——自定义数据元素(data-*)。这些是自定义的(用*表示)属性，您可以将这些属性添加到HTML元素中，以定义所需的任何类型的数据。它们由两部分组成:

属性名称 这是属性的名称。必须至少有一个小写字符，并且前缀为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访问它，并根据这些数据操作页面。

已经给出了这么多答案，但都没说到点子上。让我们来解决这个问题。

http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp 一针见血

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

如何使用:只需2步

在你想要折叠的元素#A上添加class="collapse"。 添加data-target="#A"和data-toggle="collapse"。

用途:data-toggle属性允许我们在使用Bootstrap时创建一个控件来折叠/展开div(块)。

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

Bootstrap文档:

<!--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>