bootstrap下拉菜单使用方法解析


Posted in Javascript onJanuary 13, 2017

Bootstrap框架中的下拉菜单组件是一个独立的组件,具体来学习一下

下拉菜单(Dropdown)

☑ LESS版本:对应的源文件dropdowns.less

bootstrap下拉菜单使用方法解析

<h3>示例1</h3>
<div class="navbar navbar-default" id="navmenu">
  <a href="##" class="navbar-brand">W3cplus</a>
  <ul class="nav navbar-nav">
    <li class="dropdown">
      <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">CSS3</a></li>
        <li role="presentation"><a href="##">HTML5</a></li>
        <li role="presentation"><a href="##">Sass</a></li>
      </ul>
    </li>
    <li><a href="##">前端论坛</a></li>
    <li><a href="##">关于我们</a></li>
  </ul>
</div>

<h3>示例2</h3>
<ul class="nav nav-pills">
  <li class="dropdown">
    <a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
      <li role="presentation"><a href="##">CSS3</a></li>
      <li role="presentation"><a href="##">HTML5</a></li>
      <li role="presentation"><a href="##">Sass</a></li>
    </ul>
  </li>
  <li class="active"><a href="##">前端论坛</a></li>
  <li><a href="##">关于我们</a></li>
</ul>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js"></script>

下拉菜单?属性声明式方法(一)

☑ 被点击的菜单项链接或按钮需要添加自定义属性 data-toggle=”dropdown”
实现下拉菜单原理:

Dropdown插件加载时,对所有带 有“data-toggle=dropdown”样式的元素绑定了事件,用户单击带有“data-toggle=dropdown”样式的链接或按钮时, 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时,下拉菜单的父容器(上面的示例是 “<li class="dropdown">”)会添加一个open类名,此时下拉菜单显示;再次单击时,JavaScript会删除刚添加的open类 名,此时下拉菜单将隐藏。

下接菜单结构:

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

如果触发下拉菜单的元素是一个链接元素,为了避免点击链接,页面跳到顶部,可以使用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>


<ul class="nav nav-pills">
  <li><a href="##">教程</a></li>
  <li class="active"><a href="##">前端论坛</a></li>
  <li class="dropdown">
    <a href="##" data-toggle="dropdown" class="dropdown-toggle">关于我们</a>   

     <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">CSS3</a></li>
        <li role="presentation"><a href="##">HTML5</a></li>
        <li role="presentation"><a href="##">Sass</a></li>
     </ul>
  </li>
</ul>

下拉菜单?JavaScript触发方法

<ul class="nav nav-pills">
  <li class="dropdown">
    <a href="##" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
      <li role="presentation"><a href="##">CSS3</a></li>
      <li role="presentation"><a href="##">HTML5</a></li>
      <li role="presentation"><a href="##">Sass</a></li>
    </ul>
  </li>
  <li class="active"><a href="##">前端论坛</a></li>
  <li><a href="##">关于我们</a></li>
</ul>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script>
  $(function(){
  $(".dropdown-toggle").dropdown();
})  
</script>

//显示下拉菜单:
$(function(){
  $(".dropdown-toggle").dropdown("toggle");
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
js数组与字符串常用方法总结
Jan 13 #Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 #Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 #Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 #Javascript
bootstrap警告框使用方法解析
Jan 13 #Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 #Javascript
js实现文字向上轮播功能
Jan 13 #Javascript
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
Yii框架安装简明教程
2020/05/15 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
pycharm安装图文教程
2017/05/02 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
军训心得体会
2013/12/31 职场文书
护士辞职信模板
2014/01/20 职场文书
《开国大典》教学反思
2014/04/19 职场文书
小学生优秀评语大全
2014/04/22 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
2014年变电站工作总结
2014/12/19 职场文书