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 相关文章推荐
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
Require.js的基本用法详解
Jul 03 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
React父子组件间的传值的方法
Nov 13 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 curl 伪造IP来源的实例代码
2012/11/01 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python交互式图形编程实例(二)
2017/11/17 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
外贸业务员求职信
2014/06/16 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
期末个人总结范文
2015/02/13 职场文书