JS组件Bootstrap实现下拉菜单效果代码_javascript技巧

如果您想要单独引用该插件的功能，那么您需要引用 dropdown.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

一、用法
您可以切换下拉菜单（Dropdown）插件的隐藏内容：

1、通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：

 下拉菜单（Dropdown）触发器
 
 ...
 

如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：

 
 下拉菜单（Dropdown） 
 
 
 
 
 ...
 

2、通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：
$('.dropdown-toggle').dropdown()

二、下拉菜单简单实例
常规使用中，和组件方法一样，代码如下：

//声明式用法


 
 下拉菜单
 
 
 
 
首页
 
产品
 
资讯
 
关于
 

声明式用法的关键核心：
1.外围容器使用 class="dropdown"包裹；
2.内部点击按钮事件绑定 data-toggle="dropdown"；
3.菜单元素使用 class="dropdown-menu"。

下拉菜单支持 4 种事件，分别对应弹出前、弹出后、关闭前和关闭后。

三、在标签页内的下拉菜单的用法

效果图：