Bootstrap下拉菜单更改为悬停(hover)触发的方法


Posted in Javascript onMay 24, 2017

Bootstrap下拉菜单默认需要通过点击,才可以打开,在管理系统的开发过程中,使用悬停代替点击能减少一步操作,更人性化。下面是实现方式:

<!DOCTYPE html>
<html>
  <head>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-hover-dropdown/2.0.10/bootstrap-hover-dropdown.min.js"></script>
  </head>
  <body>
    <div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
   data-toggle="dropdown" data-hover="dropdown">
   主题
   <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">Java</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">
      数据通信/网络
     </a>
   </li>
   <li role="presentation" class="divider"></li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
   </li>
  </ul>
</div>
  </body>
</html>

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

Javascript 相关文章推荐
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
vue.js开发环境搭建教程
May 04 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
Node与Python 双向通信的实现代码
Jul 16 Javascript
微信小程序 生命周期函数详解
May 24 #Javascript
很棒的vue弹窗组件
May 24 #Javascript
详解Vue使用命令行搭建单页面应用
May 24 #Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 #Javascript
微信小程序 支付功能(前端)的实现
May 24 #Javascript
微信小程序 选项卡的简单实例
May 24 #Javascript
JS回调函数基本定义与用法实例分析
May 24 #Javascript
You might like
PHP 文件扩展名 获取函数
2009/06/03 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
js中文逗号转英文实现
2014/02/11 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Django封装交互接口代码
2020/07/12 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
巴西宠物商店:Cobasi
2019/04/19 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
《哪吒闹海》教学反思
2014/02/28 职场文书
企业文化口号
2014/06/12 职场文书
语文教师求职信范文
2015/03/20 职场文书
房产证明范本
2015/06/19 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
MySQL去除密码登录告警的方法
2022/04/20 MySQL
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP