为了账号安全,请及时绑定邮箱和手机立即绑定

data-toggle

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

正在回答

8 回答

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

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

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


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

 <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>

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

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

楼主,jquery引入没有

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

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

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

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

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

请修改昵称

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

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>下拉菜单</title>

<link rel="stylesheet" href="http://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="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

</html>

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

0 回复 有任何疑惑可以回复我~
<!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 回复 有任何疑惑可以回复我~
#1

zengjd2

你的src地址错了,你对比一下就知道了,,,看楼下的
2016-03-29 回复 有任何疑惑可以回复我~

可我这个写上去了,但下拉菜单展示不了,这有是什么原因!

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

nergmind

我也是 后来查了一下需要同时引用 bootstrap.js 和bootstrap.min.js 只引用一个会有bug
2016-03-17 回复 有任何疑惑可以回复我~
#2

慕工程9665676 回复 nergmind

我把两个都引用了,还是没有data-toogle
2016-04-24 回复 有任何疑惑可以回复我~
#3

gekkon3633439 回复 慕工程9665676

你属性名都写错了。。。是data-toggle不是data-toogle
2016-07-10 回复 有任何疑惑可以回复我~

BS的自定义属性..关联BS的JS插件的....来实现下拉菜单

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

举报

0/150
提交
取消
基于bootstrap的网页开发
  • 参与学习       187668    人
  • 解答问题       734    个

Bootstrap框架的基础教程,学会用Bootstrap前端框架搭建网页

进入课程
意见反馈 帮助中心 APP下载
官方微信