JS组件引导实现下拉菜单效果代码

引导下拉菜单解释了下拉菜单，但不涉及交互部分。本章将具体解释下拉菜单的交互。使用下拉插件，您可以向任何组件添加下拉菜单(如导航栏、选项卡、胶囊导航菜单、按钮等)。).

如果要单独引用插件函数，需要引用dropdown.js或者，如Bootstrap插件概述一章所述，可以引用bootstrap.js或者bootstrap.min.js的压缩版本

一、用法您可以切换下拉插件的隐藏内容：

1.使用data属性：将data-toggle='dropdown '添加到链接或按钮以切换下拉菜单，如下所示：

div class=' Download ' a data-toggle=' Download ' href=' # ' Download触发器/a ul class=' Download-menu '角色=' menu ' aria-标签为=' dlabel './ul/Div如果需要保持链接不变(在浏览器中未启用JavaScript时很有用)，请使用data-target属性，而不是href='# ':

class=' drop down ' A id=' dlabel ' role=' button ' data-toggle=' drop down ' data-target=' # ' href='/page . html '下拉菜单span class=' caret '/span/A ul class=' drop down-menu ' role=' menu ' aria-由=' d label '标记./ul/div 2，通过JavaScript:调用下拉菜单进行切换，请使用以下方法：$('。下拉-切换')。下拉列表()。

二、下拉菜单简单示例在正常使用中，像组件方法一样，代码如下：

//声明性用法div class=' drop down ' Button class=' btnbtn-primary ' data-toggle=' drop down '下拉菜单span class=' caret '/span/Button ul class=' drop down-menu ' lia href=' # '主页/a/li lia href='# '产品/a/li lia href='# '信息/a/li lia href='# '关于/a/li /ul/div声明性用法：1。使用外围容器class='。2.内部点击按钮事件绑定数据-切换='下拉'；3.菜单元素使用class='下拉菜单'。

//如果按钮在容器外部，可以通过data-target进行绑定。class=' BTNBTN-primary ' id=' BTN ' data-toggle=' drop down ' data-target=' # drop down '在JavaScript调用中，该方法不容易使用，因此这里有四个基本事件。//下拉菜单方法，但还是需要data-*$('#btn ')。下拉列表()；$('#btn ')。下拉菜单('切换')；下拉菜单支持四种事件，分别对应弹出前、弹出后、关闭前、关闭后。

//事件，其他类似的$ ('# dropdown ')。on ('show.bs.dropdown '，function () {alert('调用show方法时立即触发！');});三、选项卡中下拉菜单的使用。

！键入带有下拉菜单的html head title bootstrap instance-tab/title link href='/bootstrap/CSS/bootstrap . min . CSS ' rel='样式表' script src=' http 3360/scripts/jquery . min . js '/script script src=' http :/bootstrap/js/bootstrap . min . js '/script/head dy p tab带下拉菜单/pul class=' nav-tab ' Li class=' active ' a href=' # ' Home/a/Linet/a/Li Li class=' drop down ' a class=' drop down-toggle ' data-toggle=' drop down ' href=' # ' Java span class=' caret '/span/a ul class=' drop down-menu ' lia href=' # ' jmeter/a/lilia href=' # ' EJB/a/Li Li Li class='分隔线'/lilia href=' # '分离链接/a/Li/ul/lilia href=' # ' PHP/a/Li/Li/Li

如果你还想深入学习，可以点击这里学习，然后为你附上3个精彩话题：

引导教程。

自举实用教程。

引导插件教程。

以上就是本文的全部内容，希望对大家的学习有所帮助。