Bootstrap导航条可点击和鼠标悬停显示下拉菜单


Posted in Javascript onNovember 25, 2016

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~

首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句:

// APPLY TO STANDARD DROPDOWN ELEMENTS
 // ===================================

 $(document)
 .on('click.bs.dropdown.data-api', clearMenus)
 .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
 .on('click.bs.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
 .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

找到几句关键代码后,想到了解决办法,只要把其中click.bs.dropdown.data-api事件关闭就OK了,代码如下:

$(document).ready(function(){
 $(document).off('click.bs.dropdown.data-api');
});

以上代码测试有效,导航条可点击问题解决,下面解决鼠标悬停弹下拉菜单问题,这个相对简单些,用JQuery的鼠标事件就可实现,代码如下:

$(document).ready(function(){
 dropdownOpen();//调用
});
/**
 * 鼠标划过就展开子菜单,免得需要点击才能展开
 */
function dropdownOpen() {

 var $dropdownLi = $('li.dropdown');

 $dropdownLi.mouseover(function() {
 $(this).addClass('open');
 }).mouseout(function() {
 $(this).removeClass('open');
 });
}

小编再为大家分享一个例子:bootstrap实现鼠标悬停自动打开下拉列表框 
Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap导航条鼠标悬停下拉菜单</title>
<link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">
<script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
<script id="bootstrap_221" type="text/javascript" class="library" src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="span12">
  <h1>Bootstrap导航条鼠标悬停下拉菜单</h1>
  <p>Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单。</p>
  <div class="navbar">
   <div class="navbar-inner">
    <ul class="nav">
     <li><a href="#">Menu1</a></li>
     <li><a href="#">Menu2</a></li>
     <li class="dropdown"> <a href="#menu3">Menu3</a>
      <ul class="dropdown-menu">
       <li><a href="#menu7">Menu7</a></li>
       <li><a href="#menu8">Menu8</a></li>
      </ul>
     </li>
     <li><a href="#">Menu4</a></li>
     <li><a href="#">Menu5</a></li>
     <li><a href="#">Menu6</a></li>
    </ul>
   </div>
  </div>
 </div>
</div>
</body>
</html>

需要添加的CSS样式如下:

.navbar .nav > li .dropdown-menu {
 margin: 0;
}
.navbar .nav > li:hover .dropdown-menu {
 display: block;
}

这样就可以在Bootstrap中实现鼠标悬停的下拉菜单了

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

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

Javascript 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
jquery validate.js表单验证入门实例(附源码)
Nov 10 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
javaScript语法总结
Nov 25 #Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 #Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 #Javascript
javascript简单进制转换实现方法
Nov 24 #Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 #Javascript
详解Node.js:events事件模块
Nov 24 #Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 #Javascript
You might like
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
vue实现简单图片上传
2020/06/30 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
numpy中loadtxt 的用法详解
2018/08/03 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
浅谈Python爬虫基本套路
2019/03/25 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
12岁生日感言
2014/01/21 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
社团文化节策划书
2014/02/01 职场文书
大学生社会实践方案
2014/05/11 职场文书
电气自动化求职信
2014/06/24 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
授权收款委托书范本
2014/10/10 职场文书
拖欠货款起诉状
2015/05/20 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL