Bootstrap 下拉菜单
网页交互的时候经常需要上下文菜单或者隐藏/展示菜单项，Bootstrap提供了下拉菜单的设置方法。
只有在菜单的父元素上应用.open样式（当单击“下拉菜单”按钮的时候，会自动在.dropdown样式的div元素上再次附加一个.open样式）并且该元素设定为position：relative（直接使用.dropdown样式）的时候，下拉菜单才会正常显示，
注意：设置菜单标题，则为li元素应用.dropdown-header样式，例子：
<div class="dropdown open"> <span style="white-space:pre"> </span><ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </div>
效果：（值得注意的是，当我去掉div的open或者 dropdown样式，则什么也不显示）
菜单默认左对齐，给ul加一个pull-right样式，会使菜单变为右对齐：
<div class="dropdown open"> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu pull-right"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </div>
效果：
二、上面说了最外层div需要有open样式，下拉菜单才能显示，而且，当单击“下拉菜单”按钮的时候，会自动在.dropdown样式的div元素上再次附加一个.open样式，这个按钮就在下拉菜单的上面，例如：
<div class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button" href="#">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </div>效果：
需要注意的是：
1、被单击的链接或按钮上需要应用data-toggl=“dropdown” 样式，以便在初始化的时候JavaScript可以监控单击事件
2、我发现，去掉按钮a的class中的dropdown-toggle样式后，并没有啥影响，这说明JavaScript检测单击事件不使用这个样式，但是可能有其他作用，暂时不知道！
3、为了避免href=”#”被单击时页面跳到顶部，可以使用data-target=”#”代替href=”#”。
实现原理如下：
1、Dropdown插件在网页加载的时候，对所有带有datatoggle=“dropdown”样式的元素进行事件绑定。
2用户单击带有data-toggle=“dropdown”样式的链接或按钮时，触发JavaScript事件代码。
3、Javascript事件代码在父容器（本例是：<li class=“dropdown”>）上加一个.open样式。
4、默认隐藏的.dropdown-menu菜单在外部有了.open样式后，即可显示出来，从而达到预期的效果。
另外：那个按钮可以放在容器元素的外面，此时，需要为ul设置一个id，然后，让按钮的href或data-target的值为此id即可，效果和上例是一样的，例如：
<a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button" data-target="#menutest" >Dropdown<span class="caret"></span></a> <div class="dropdown" id="menutest"> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </div>
三、JavaScript代码控制菜单的显示与隐藏：
Bootstrap的Dropdown插件也支持JavaScript手动触发的方式，这样的好处是，可以按照自己的方式省略一些元素或者样式：
<script type=“text/javascript”>
$(document).ready(
function () {
$(‘.dropdown-toggle’).dropdown();
});
</script>
上面的这个#myDropdown是的最外层的那个div的 id
四、下拉菜单常用情况
一般下拉菜单都是在导航条（navbar）和选项卡（tab）上实现。
1、导航条实现：
<div class="navbar navbar-default"> <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div> <ul class="nav navbar-nav"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> </ul> </div>效果：
2、选项卡上：
<ul class="nav nav-pills"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle btn btn-default" role="button">Dropdown<span class="caret"></span></a> <ul aria-labelledby="dropdownMenu2" role="menu" class="dropdown-menu"> <li class="dropdown-header" role="presentation">翻译图书</li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript编程精解</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript权威指南</a> </li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript设计模式</a></li> <li role="presentation"><a href="#" tabindex="-1" role="menuitem">JavaScript程序设计</a> </li> </ul> </li> </ul>效果：
五、按钮分离式下拉菜单
就是单击按钮旁边的小三角弹出下拉菜单，单击按钮可以是其他效果。
<div class="btn-group"> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">JavaScript权威指南</a> </li> <li><a href="#">JavaScript设计模式</a> </li> <li><a href="#">JavaScript语言精粹</a> </li> </ul> </div>效果：
另外，给最外层div加一个dropup样式，则会使菜单向上弹出，而不是向下弹出，<div class=dropdown dropup">...</div>