Bootstrap 多级下拉菜单

在很多时候，我们可能需要多级下拉菜单。在一个下拉菜单的某个菜单项中，再创建另一个下拉菜单，即可实现多级下拉菜单。

只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类，并在该 <li> 元素下添加 .dropdown-menu 类的列表，就可以为该菜单项添加一个子下拉菜单。如：

1. <div class="dropdown">
2.   <ul class="dropdown-menu">
3.     <li><a tabindex="-1" href="#">Action</a></li>
4.     <li><a tabindex="-1" href="#">Another action</a></li>
5.     <li><a tabindex="-1" href="#">Something else here</a></li>
6.     <li class="divider"></li>
7.     <li class="dropdown-submenu">
8.       <a tabindex="-1" href="#">More options</a>
9.       <ul class="dropdown-menu">
10.         <li><a tabindex="-1" href="#">Second level link</a></li>
11.         <li><a tabindex="-1" href="#">Second level link</a></li>
12.         <li><a tabindex="-1" href="#">Second level link</a></li>
13.         <li><a tabindex="-1" href="#">Second level link</a></li>
14.         <li><a tabindex="-1" href="#">Second level link</a></li>
15.       </ul>
16.     </li>
17.   </ul>
18. </div>

效果如图 4‑6所示：

图4-6 Bootstrap多级下拉菜单组件

默认情况下，子菜单会在父菜单的右侧弹出。如果希望它在父菜单的左侧弹出，只需给相应的 <li> 元素添加 .pull-left 类即可：

1. <li class="dropdown-submenu pull-left">
2. …
3. </li>

效果如图 4‑7所示：

图4-7 左侧弹出的Bootstrap下拉菜单组件

另外，子菜单默认是以下拉形式弹出。如果希望以上拉形式弹出，只需把整个下拉菜单包裹在 .dropup 的容器中即可：

1. <div class="dropup">
2. …
3. </div>

效果如图 4‑8所示：

图4-8 Bootstrap上拉菜单组件

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。