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


Posted in Javascript onApril 26, 2016

Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互。使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。

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

一、用法
您可以切换下拉菜单(Dropdown)插件的隐藏内容:

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

<div class="dropdown">
 <a data-toggle="dropdown" href="#">下拉菜单(Dropdown)触发器</a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
 ...
 </ul>
</div>

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

<div class="dropdown">
 <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
 下拉菜单(Dropdown) <span class="caret"></span>
 </a>
 
 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
 ...
 </ul>
</div>

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

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

//声明式用法

<div class="dropdown">
 <button class="btn btn-primary" data-toggle="dropdown">
   下拉菜单
   <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
   <li><a href="#">首页</a></li>
   <li><a href="#">产品</a></li>
   <li><a href="#">资讯</a></li>
   <li><a href="#">关于</a></li>
 </ul>
</div>

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

//如果按钮在容器外部,可以通过 data-target 进行绑定。

<button class="btn btn-primary" id="btn" data-toggle="dropdown"
data-target="#dropdown">
在 JavaScript 调用中,没有属性,方法并不好用,下面介绍四个基本事件。
//下拉菜单方法,但仍然需要 data-*

$('#btn').dropdown();
$('#btn').dropdown('toggle');

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

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

//事件,其他雷同

$('#dropdown').on('show.bs.dropdown', function() {
 alert('在调用 show 方法时立即触发!');
});

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

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="/scripts/jquery.min.js"></script>
 <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
 <li><a href="#">VB.Net</a></li>
 <li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
   Java <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
   <li><a href="#">Swing</a></li>
   <li><a href="#">jMeter</a></li>
   <li><a href="#">EJB</a></li>
   <li class="divider"></li>
   <li><a href="#">分离的链接</a></li>
  </ul>
 </li>
 <li><a href="#">PHP</a></li>
</ul>
 
</body>
</html>

效果图:

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 #Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 #Javascript
深入理解JS中的substr和substring
Apr 26 #Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 #Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 #Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 #Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 #Javascript
You might like
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
npm的lock机制解析
2019/06/20 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python3生成手写体数字方法
2018/01/30 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
PHP面试题及答案一
2012/06/18 面试题
2014年车间工作总结
2014/11/21 职场文书
2014年双拥工作总结
2014/11/21 职场文书
高三毕业评语
2014/12/31 职场文书
通报表扬范文
2015/01/17 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
幸福终点站观后感
2015/06/04 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫