木子车
2017-01-06 11:39
<!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">
</head>
<body>
<h3>示例2</h3>
<ul class="nav nav-pills">
<li class="dropdown">
<a href="##" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">CSS3</a></li>
<li role="presentation"><a href="##">HTML5</a></li>
<li role="presentation"><a href="##">Sass</a></li>
</ul>
</li>
</ul>
<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>
<!--下面是代码任务区-->
<script>
$(function(){
$(".dropdown-toggle").dropdown() ;
});
</script>
</body>
</html>
如官网上所说,data-toggle="dropdown"不能省略
data-toggle="dropdown" still required
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.
<script>
$(function(){
$(".dropdown-toggle").one("click",function(){
$(this).dropdown("toggle");
})
})
</script>
在a标签那边少了data-toggle="dropdown"
玩转Bootstrap(JS插件篇)
128659 学习 · 303 问题
相似问题