它是一个Bootstrap数据属性，自动将元素与它所在的小部件类型挂钩。Data-*是html5规范的一部分，Data- toggle是Bootstrap特有的。

一些例子:

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

浏览Bootstrap 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>

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

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

它用于显示模式、选项卡内容、工具提示和弹出菜单，以及设置切换按钮的按下状态。它可以在没有明确文档的情况下以多种方式使用。

任何以data-开头的属性都是用于某些特定目的(该目的取决于应用程序)的自定义属性的前缀。它被添加为一种语义补救方法，以解决人们大量使用rel和其他属性而不是用于原始目的的问题(rel通常用于保存高级工具提示等数据)。

在Bootstrap的情况下，我不熟悉它的内部工作原理，但从名字判断，我猜它是一个钩子，允许切换可见性或它所附加的元素的模式(例如Octopress.org上的可折叠侧栏)。

Html5doctor有一篇关于data-属性的好文章。

循环2是广泛使用data-属性的另一个例子。

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>

例如，假设您正在创建一个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访问它，并根据这些数据操作页面。

在这里，您还可以找到更多数据切换可以赋值的示例。只需访问页面，然后按CTRL+F搜索数据切换。

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

数据- *

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

参考

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

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(块)。

The purpose of data-toggle in bootstrap is so you can use jQuery to find all tags of a certain type. For example, you put data-toggle="popover" in all popover tags and then you can use a JQuery selector to find all those tags and run the popover() function to initialize them. You could just as well put class="myPopover" on the tag and use the .myPopover selector to do the same thing. The documentation is confusing, because it makes it appear that something special is going on with that attribute.

This

<div class="container">
    <h3>Popover Example</h3>
    <a href="#" class="myPop" title="Popover1 Header" data-content="Some content inside the popover1">Toggle popover1</a>
    <a href="#" class="myPop" title="Popover2 Header" data-content="Some content inside the popover2">Toggle popover2</a>
</div>

<script>
    $(document).ready(function(){
        $('.myPop').popover();   
    });
</script>

工作得很好。