Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现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导航条可点击和鼠标悬停显示下拉菜单的更多相关文章
- bootstrap 导航栏鼠标悬停显示下拉菜单
在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page lang ...
- lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单
lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...
- Bootstrap学习笔记(4)--导航栏
相关类: nav, nav-pills, nav-tags, nav-stacked ul里使用,导航格胶囊,方片外观,堆叠外观 navbar, navbar-header, navbar-brand ...
- Bootstrap 学习笔记3 输入框和导航组件
导航组件: 导航条组件: 导航条代码: <nav class="navbar navbar-default"> <div class="containe ...
- bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
- bootstrap学习笔记<一>(bootstrap用法)
首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...
- Bootstrap学习笔记(6)--导航居中
说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"&g ...
- js 导航栏多项点击显示下拉菜单代码
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...
- bootstrap学习笔记<九>(菜单,按钮。导航基本元素)
有了bootstrap作导航不再麻烦,几个样式,几个标签就能轻松搞定. 下面就来分解学习导航条的制作. 一.首先是下拉菜单 <div class="dropdown"> ...
随机推荐
- go语言基础之局部变量特点
1.局部变量特点 示例1: package main import "fmt" func main() { //定义在{}里面的变量就是局部变量,只能在{}里面有效 //执行到定义 ...
- SQL Server更改排序规则的实现过程
摘自: http://www.2cto.com/database/201112/115138.html 以下的文章主要向大家描述的是SQL Server更改排序规则的实现过程,以及在实现其实际操作过程 ...
- WebApi-如何实现接口加密
方法一 加一个访问token.例如你的api地址是http://www.example.com/api.php需要接受的参数有a,b,c三个那么可以加一个验证token(通过约定的key加密生成). ...
- MySQL for Mac安装和启动
MySQL for Mac安装和启动 学习了:https://blog.csdn.net/a380880304/article/details/49840139 注意密码是数字1还是字母l: 系统提示 ...
- Install Visual Studio Tools for Apache Cordova
Install Visual Studio Tools for Apache Cordova Visual Studio 2013 This article refers to the Visua ...
- Cocos2d-x源代码解析(1)——地图模块(1)
cocos通过加载tiled 生成的tmx文件来生成游戏地图.本文主要分析cocos加载地图模块的源代码. 如图所看到的,地图加载模块由以上几个类组成. 对外的入口是类CCTMXTiledMap, ...
- C#应用视频教程2.4 OPENGL虚拟仿真介绍
这一部分我们首先实现视图控制(包括了平移/旋转/缩放),前面我们已经讲过,通过lookat一个函数,或者通过translate+rotate两个函数,都能实现视图的控制(两个函数的方式比较简单,但是通 ...
- onvif获取摄像头的流媒体地址完整流程
linux设备上的Onvif 实现6:获取摄像头的流媒体地址完整流程 整体流程: Probe: 发现网络摄像头,获取webserver地址 http://192.168.15.240/onvif/de ...
- 从错误中学python(2)————字符串转浮点数
题目 自己编写函数:利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456: 题目来源--致敬廖雪峰 解决过程 初步的解决方法 def str2f ...
- Edit Control响应全选(Ctrl+A)
MFC中的Edit控件用于输入数据,当输入的数据为大段数字的时候,全选功能就显得非常重要了,可偏偏在MFC中Edit控件就不 支持全选.Ctrl+A不行,双击也不行. Ctrl+C和Ctrl+V都是默 ...