2-1 下拉菜单（Dropdown）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

下拉菜单（Dropdown）

插件对应的源文件：dropdown.js(使用单独引入的方法可使用下面链接)

（官方发布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js）

样式代码：

  ☑ LESS版本：对应的源文件dropdowns.less

  ☑ Sass版本：对应的源文件_dropdowns.scss

  ☑ 编译后的Bootstrap版本：对应bootstrap.css文件第3122行～第3251行

在介绍Bootstrap的组件的时候，只介绍了下拉菜单的结构和表现形式（样式风格），在这一节中主要介绍怎么结合JavaScript代码实现交互效果。

和模态弹出窗一样，触发下拉菜单方式有两种，一种是属性声明式用法，另一种是JavaScript方法。下面几个小节分别来看这两种方法是如何触发下拉菜单。

任务

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>下拉菜单--属性声明式方法（一）</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <h3>示例1</h3>
  11. <div class="navbar navbar-default" id="navmenu">
  12.     <a href="##" class="navbar-brand">W3cplus</a>
  13.     <ul class="nav navbar-nav">
  14.     	<li class="dropdown">
  15. 			<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
  16. 			<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
  17. 				<li role="presentation"><a href="##">CSS3</a></li>
  18. 				<li role="presentation"><a href="##">HTML5</a></li>
  19. 				<li role="presentation"><a href="##">Sass</a></li>
  20. 			</ul>
  21. 		</li>
  22. 		<li><a href="##">前端论坛</a></li>
  23. 		<li><a href="##">关于我们</a></li>
  24. 	</ul>
  25. </div>
  26.  
  27. <h3>示例2</h3>
  28. <ul class="nav nav-pills">
  29. 	<li class="dropdown">
  30. 		<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
  31. 		<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
  32. 			<li role="presentation"><a href="##">CSS3</a></li>
  33. 			<li role="presentation"><a href="##">HTML5</a></li>
  34. 			<li role="presentation"><a href="##">Sass</a></li>
  35. 		</ul>
  36. 	</li>
  37. 	<li class="active"><a href="##">前端论坛</a></li>
  38. 	<li><a href="##">关于我们</a></li>
  39. </ul>
  40. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  41. <script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js"></script>
  42. </body>
  43. </html>
下一节