课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

data-toggle

来源：3-1 导航及下拉菜单制作

_kevin_

2015-06-10 17:24

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

写回答 关注

8回答

  • 我是小飞侠
    2017-08-05 12:16:00

     国外网站经常会看到代码中有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 0
  • amoyf3278517
    2016-10-10 23:18:31

    楼主，jquery引入没有

    0 0
  • 云月笛
    2016-09-30 08:51:48

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

    0 2
  • 森林迷了鹿Andera
    2016-06-21 17:31:51

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

    1 0

    请修改昵称

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

    2016-07-05 21:55:12

    共 1 条回复 >

  • zengjd2
    2016-03-29 23:48:42

    <!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 0
  • qq_长流_0
    2016-03-25 20:57:54
    <!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>

    
			
    
			
    
				
					
					1
				
				
					
					0
				
			
    
			
			
			
    
				
    zengjd... 
    
				
    你的src地址错了，你对比一下就知道了，，，看楼下的
    
				
    2016-03-29 23:50:06
    
			
    
			
			
    共 1 条回复 >
    
			
		
    • 
		
		
  • 
			
    
				
				
    
					
    _kevin_
    
					
    2015-06-11 09:30:46
    
				
    

				
			
    
			
    
				
    可我这个写上去了，但下拉菜单展示不了，这有是什么原因！
    
			
    
			
    
				
					
					3
				
				
					
					0
				
			
    
			
			
			
    
				
    gekkon... 回复慕工程966... 
    
				
    你属性名都写错了。。。是data-toggle不是data-toogle
    
				
    2016-07-10 06:04:49
    
			
    
			
			
    共 3 条回复 >
    
			
		
    • 
		
		
  • 
			
    
				
				
    
					
    成者并非一蹴而就
    
					
    2015-06-10 18:22:25
    
				
    

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

	





	
基于bootstrap的网页开发

	

		

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

		

	

	

		
187668 学习 · 734 问题

	

	查看课程






	
相似问题

	

		
		

			这里的data-toggle 和data-target 是什么含义
			
回答 3

		

		
		

			data-ride="carousel"  请问这句话是干嘛用的？
			
回答 1

		

		
	







	打开慕课网App查看更多内容