Bootstrap 下拉菜单

下拉菜单

Bootstrap中，可以将下拉菜单添加到任何其他组件中，包括导航条、胶囊式导航、标签导航、按钮导航等。

下拉菜单插件需要 bootstrap-dropdown.js 文件支持，在使用该插件之前，应该导入 jQuery 和 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')

   b(147, 161, 161);">)

2. 关于作者

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