鼠标点击出现下拉菜单html,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实现鼠标悬停自动打开下拉列表框Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单。
Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单
Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单。
- Menu1
- Menu2
- Menu3
- Menu7
- Menu8
- Menu4
- Menu5
- Menu6
需要添加的CSS样式如下:
.navbar .nav > li .dropdown-menu {
margin: 0;
}
.navbar .nav > li:hover .dropdown-menu {
display: block;
}
这样就可以在Bootstrap中实现鼠标悬停的下拉菜单了
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
鼠标点击出现下拉菜单html,Bootstrap导航条可点击和鼠标悬停显示下拉菜单相关推荐
- CSS - 鼠标移入悬停显示下拉菜单(导航栏鼠标经过 hover 时出现二级菜单)
前言 该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
- html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单
个人信息维护 学生信息修改 修改密码--%> 修改密码--%> 修改密码--%> 退出 登录用户: 所在班级: js文件 //个人信息维护下拉菜单样式 $(function () { ...
- bootstrap 导航栏鼠标悬停显示下拉菜单
在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block; } 全部代码如下所示: <%@ page lan ...
- php实现鼠标悬停显示下拉菜单,Html中鼠标悬停显示二级菜单的两种方法
Windows Phone 8.1中处理后退键的HardwareButtons.BackPressed事件 在WP8中,处理后退键比较简单,重写OnBackKeyPress事件即可.如经常用的双击后退 ...
- Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
- 鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
- 鼠标悬浮显示下拉菜单,离开隐藏
在网页版的csdn中,当用户将鼠标悬浮在头像框上时,会自动显示一个下拉菜单,这篇博客实现的就是这样的功能,但在文章内只记录核心的功能,不对样式做过多修饰 效果如下: 下拉菜单的显示隐藏只需要设置dis ...
- 右边菜单_Excel – 如何始终显示下拉菜单右边的小箭头?
制作下拉菜单,不是什么高深的技巧,我在各种案例中也经常会用到. 如果要学习多级联动菜单的制作,可参见 Excel indirect 函数(2) – 制作多级联动菜单(文末彩蛋) 最近有同学提出了一个关 ...
- php 显示下拉菜单,PHP在下拉列表中显示菜单树
菜单树的功能: function category_tree($parent_id) { $sql = "SELECT * FROM menu WHERE parent_id ='" ...
最新文章
- 关于在Android中一个XML文件包含另外一个XML的方法
- Python 之 super MRO (没有遇到过适用场景)
- TreeSet集合排序方式二:定制排序Comparator
- shanghai hongqiao railway station
- opencv3.10加入OPENCV_contrib模块
- php curl form-data,在php curl multipart / form-data请求中发送一个文件和json数据
- MVC Area Usage
- Flutter ScrollView 滑动组件
- 二十个让你泪流满面的瞬间
- vivo NEX 3S 5G今日登场:无界瀑布屏加持 世界随处可及
- iPhone 11“机模”上手:硕大后置相机模组很突兀
- Spark scala和java的api使用
- c语言情书大赛图片,校园情书大赛,一等奖是“真”情书
- 使电动机反转的matlab仿真图,基于simulink的Matlab仿真作业(电气工程专业)2
- X Window 用户指南
- 两轮差速机器人舵机转轴示意图_一种基于两轮差速机器人的运动控制方法与流程...
- 经济学积累(二)一些经济学词汇及概念
- 算法练习-Apples Prologue
- Redis 作者 Antirez 讲如何实现分布式锁?Redis 实现分布式锁天然的缺陷分析Redis分布式锁的正确使用姿势!...
- apache默认端口号是多少