                        課程
                    
                        /前端開發
                        
                            /Bootstrap
                        
                        /基于bootstrap的網頁開發

data-toggle

data-toggle="dropdown"是什么意思，我這個是“data-toggle”一個一個寫上的，敲不出來，是不是什么包導錯了嗎？

_kevin_

2015-06-10

源自：基于bootstrap的網頁開發 3-1

關注問題我要回答

33583

操作

收起

8 回答

我是小飛俠
2017-08-05

?國外網站經常會看到代碼中有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 回復有任何疑惑可以回復我~

收起回答

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

?</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 回復有任何疑惑可以回復我~

收起回答

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

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

收起回答

zengjd2

你的src地址錯了，你對比一下就知道了，，，看樓下的

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