编程 Javascript

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>

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

- Author -

lyn0130

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js函数的引用，关于内存的开销

Sep 17 Javascript

JS正则表达式验证数字代码

Jan 28 Javascript

jQuery不使用插件及swf实现无刷新文件上传

Dec 08 Javascript

百度地图API之本地搜索与范围搜索

Jul 30 Javascript

基于JavaScript实现动态创建表格和增加表格行数

Dec 20 Javascript

javascript基本算法汇总

Mar 09 Javascript

javascript事件委托的用法及其好处简析

Apr 04 Javascript

AngularJS入门教程之ng-class 指令用法

Aug 01 Javascript

AngulaJS路由 ui-router 传参实例

Apr 28 Javascript

JavaScript面向对象精要(下部)

Sep 12 Javascript

爬虫利器Puppeteer实战

Jan 09 Javascript

使用js原生实现年份轮播选择效果实例

Jan 12 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