                        课程
                    
                        /前端开发
                        
                            /Bootstrap
                        
                        /基于bootstrap的网页开发

data-toggle

data-toggle="dropdown"是什么意思，我这个是“data-toggle”一个一个写上的，敲不出来，是不是什么包导错了吗？

_kevin_

2015-06-10

源自：基于bootstrap的网页开发 3-1

关注问题我要回答

33395

操作

收起

8 回答

我是小飞侠
2017-08-05

国外网站经常会看到代码中有data-toggle或以data-开头的属性定义，虽然W3C不认定，但最新的HTML5规定data-是合理的。

在html5中，任何以data-开始的都是自定义属性，通常它用来实现一些HTML里没有明确定义的元素，把用户自定义的属性应用到代码中。

早期的HTML是不允许这种定义，但由于浏览器都不识别这种定义，最终会无视它的存在；相反，jQuery文件就能识别和读取。如今，Html5的出现使得data-定义越来越常见，国内外主流媒体的网站代码都会看到它。

'data-toggle='其实可以理解为标签选择器，bootstrap 中的data-toggle=""这个明面上的意思是数据切换，下面我举一个例子可能更加的明白一些。

在这段代码中，data-toggle="tab"将<a>属性转换成了tab属性

0 回复有任何疑惑可以回复我~

收起回答

amoyf3278517
2016-10-10

楼主，jquery引入没有

0 回复有任何疑惑可以回复我~

收起回答

云月笛
2016-09-30

你可以把上面回答的代码粘到一个html中，然后打开，然后去掉data-toggle看看区别，我试了下，就是如果没有data-toggle,那么下拉菜单列表就不能显示出来，所以参考上面的回答，它就是引用data-toggle这样一个BS插件然后关联起下拉菜单，实现下拉菜单功能，应该是这样的把、、、

2 回复有任何疑惑可以回复我~

收起回答

森林迷了鹿Andera
2016-06-21

aria-describedby="dropdownMenu1"跟data-toggle="dropdown"是什么意思啊？

0 回复有任何疑惑可以回复我~

收起回答

请修改昵称

aria-describedby是一方便屏幕阅读器识别的标识,不写也可以,没有任何影响的. data-toggle 是调用bootstrap的这个插件,要是没有这个东西,那下拉菜单的功能是不能实现的.希望能解决你的问题

2016-07-05 回复有任何疑惑可以回复我~

zengjd2
2016-03-29

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

下拉菜单

</button>

<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>

</ul>

</div>

</body>

</html>

你的src地址错了，你对比一下就知道了

0 回复有任何疑惑可以回复我~

收起回答

qq_长流_0
2016-03-25

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答

zengjd2

你的src地址错了，你对比一下就知道了，，，看楼下的

2016-03-29 回复有任何疑惑可以回复我~