Bootstrap3 下拉菜单及其调用方式

下拉菜单

Bootstrap中，你可以为任何组件（如，导航条、胶囊式导航、标签导航、按钮等）添加下拉菜单。下拉菜单组件负责外观，下拉菜单插件（dropdown.js）负责交互行为，即控制下拉菜单组件的显示或隐藏。

调用方式

1、data属性调用

为超链接或按钮添加 data-toggle="dropdown" 属性，即可激活下拉菜单的交互行为。如：

1. <div class="dropdown">
2.   <a class="btn" data-toggle="dropdown" href="#">Dropdown trigger</a>
3.   <ul class="dropdown-menu">
4.     <li><a href="#">Action</a></li>
5.     <li><a href="#">Another action</a></li>
6.     <li><a href="#">Something else here</a></li>
7.   </ul>
8. </div>

为了保证URL符合规范，请使用 data-target="#" 代替 href="#"，并给 href 属性指定链接来执行链接操作。如：

1. <div class="dropdown">
2.   <a class="btn" data-toggle="dropdown" data-target="#">Dropdown trigger</a>
3.   <ul class="dropdown-menu">
4.     <li><a href="#">Action</a></li>
5.     <li><a href="#">Another action</a></li>
6.     <li><a href="#">Something else here</a></li>
7.   </ul>
8. </div>

2、JavaScript调用

通过 dropdown() 构造函数，可以调用下拉菜单。如：

1. $('.btn').dropdown()

使用上述方法后，单击按钮，可以弹出下拉菜单，但再次单击按钮，却不能收起下拉菜单。在调用 dropdown() 构造函数时，如果传入一个字符串参数 'toggle'，就可以让下拉菜单在显示和隐藏间来回切换。如：

1. $('.btn').dropdown('toggle')

说明：

无论使用data 属性调用方式，还是JavaScript 调用方式。你都必须为触发下拉菜单显示隐藏的元素设置 data-toggle="dropdown" 属性。

关于作者

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