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>

另外，下拉菜单支持4种类型的事件，分别对应下拉菜单的弹出前、弹出后、关闭前、关闭后，如下图：



上面的这个#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>