本篇文章讨论Bootstrap的js下拉菜单插件(bootstrap-dropdown.js)
先看个简单示例，可直接粘贴运行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单示例</title>
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-dropdown.js"></script>
</head>
<body>
<div class="dropdown">
<a data-toggle="dropdown" href="#">java开源项目</a>
<ul class="dropdown-menu">
<li><a href="#">struts1</a></li>
<li><a href="#">struts2</a></li>
<li><a href="#">spring</a></li>
</ul>
</div>
</body>
</html>
?需要注意：
Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype。因此这一文档类型必须出现在项目的每个页面的开始部分：
<!DOCTYPE html> <html lang="en"> ... </html>
?
下面来对上面的代码进行解析下：
bootstrap.css ? Bootstrap 样式库，这是必不可少的。
jquery.js ? 引入jquery，Bootstrap插件是jquery插件，依赖于jquery。
bootstrap-dropdown.js ? ?下拉菜单插件
?
<div class="dropdown">
<a href="#">java开源项目</a>
<ul class="dropdown-menu">
<li><a href="#">struts1</a></li>
<li><a href="#">struts2</a></li>
<li><a href="#">sping</a></li>
</ul>
</div>
?上面的代码就创建了一个下拉菜单。其中包括一个激活元件"java开源项目"，以及N个下拉菜单列表项(如：struts1、struts2、spring等)。上面的代码只是定义了下拉菜单的样式，要想使其真正成为下拉菜单有俩种方法：data属性或者js调用。如下：
1.data属性触发
只需要在激活元件上设置?data-toggle="dropdown"，如下：
<div class="dropdown">
<a data-toggle="dropdown" href="#" id="myDro