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


使用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学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单的更多相关文章

  1. bootstrap 导航栏鼠标悬停显示下拉菜单

    在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page lang ...

  2. lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单

    lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...

  3. Bootstrap学习笔记(4)--导航栏

    相关类: nav, nav-pills, nav-tags, nav-stacked ul里使用,导航格胶囊,方片外观,堆叠外观 navbar, navbar-header, navbar-brand ...

  4. Bootstrap 学习笔记3 输入框和导航组件

    导航组件: 导航条组件: 导航条代码: <nav class="navbar navbar-default"> <div class="containe ...

  5. bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  6. bootstrap学习笔记<一>(bootstrap用法)

    首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...

  7. Bootstrap学习笔记(6)--导航居中

    说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"&g ...

  8. js 导航栏多项点击显示下拉菜单代码

    <!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...

  9. bootstrap学习笔记<九>(菜单,按钮。导航基本元素)

    有了bootstrap作导航不再麻烦,几个样式,几个标签就能轻松搞定. 下面就来分解学习导航条的制作. 一.首先是下拉菜单 <div class="dropdown"> ...

随机推荐

  1. go语言基础之局部变量特点

    1.局部变量特点 示例1: package main import "fmt" func main() { //定义在{}里面的变量就是局部变量,只能在{}里面有效 //执行到定义 ...

  2. SQL Server更改排序规则的实现过程

    摘自: http://www.2cto.com/database/201112/115138.html 以下的文章主要向大家描述的是SQL Server更改排序规则的实现过程,以及在实现其实际操作过程 ...

  3. WebApi-如何实现接口加密

    方法一 加一个访问token.例如你的api地址是http://www.example.com/api.php需要接受的参数有a,b,c三个那么可以加一个验证token(通过约定的key加密生成). ...

  4. MySQL for Mac安装和启动

    MySQL for Mac安装和启动 学习了:https://blog.csdn.net/a380880304/article/details/49840139 注意密码是数字1还是字母l: 系统提示 ...

  5. Install Visual Studio Tools for Apache Cordova

    Install Visual Studio Tools for Apache Cordova Visual Studio 2013   This article refers to the Visua ...

  6. Cocos2d-x源代码解析(1)——地图模块(1)

    cocos通过加载tiled 生成的tmx文件来生成游戏地图.本文主要分析cocos加载地图模块的源代码.   如图所看到的,地图加载模块由以上几个类组成. 对外的入口是类CCTMXTiledMap, ...

  7. C#应用视频教程2.4 OPENGL虚拟仿真介绍

    这一部分我们首先实现视图控制(包括了平移/旋转/缩放),前面我们已经讲过,通过lookat一个函数,或者通过translate+rotate两个函数,都能实现视图的控制(两个函数的方式比较简单,但是通 ...

  8. onvif获取摄像头的流媒体地址完整流程

    linux设备上的Onvif 实现6:获取摄像头的流媒体地址完整流程 整体流程: Probe: 发现网络摄像头,获取webserver地址 http://192.168.15.240/onvif/de ...

  9. 从错误中学python(2)————字符串转浮点数

    题目 自己编写函数:利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456: 题目来源--致敬廖雪峰 解决过程 初步的解决方法 def str2f ...

  10. Edit Control响应全选(Ctrl+A)

    MFC中的Edit控件用于输入数据,当输入的数据为大段数字的时候,全选功能就显得非常重要了,可偏偏在MFC中Edit控件就不 支持全选.Ctrl+A不行,双击也不行. Ctrl+C和Ctrl+V都是默 ...