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时就弹出二级菜单。
<!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个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Bootstrap导航条鼠标悬停下拉菜单
Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹出二级菜单. 效果图: CSS修改: <style type="text/css"> .navbar .nav > li .dropdown-menu { margin: 0; } .navbar .nav > li:hover .dropdown-menu { display: block; } <
-
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA
-
Bootstrap下拉菜单更改为悬停(hover)触发的方法
Bootstrap下拉菜单默认需要通过点击,才可以打开,在管理系统的开发过程中,使用悬停代替点击能减少一步操作,更人性化.下面是实现方式: <!DOCTYPE html> <html> <head> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src=&quo
-
Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创
最近公司做网页用到Bootstrap的菜单功能,要实现鼠标悬停显示二级菜单,于是就研究了一下,大概有两种方法. 第一种方法:修改样式表 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css: 复制代码 代码如下: .nav > li:hover .dropdown-menu {display: block;} 这句css加在bootstrap.min.css之后出现的css中,你试下! 缺点: 1.相应的顶级菜单不可点击 2.鼠标滑到二级菜单后,顶级菜
-
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith
-
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA
-
js点击时关闭该范围下拉菜单之外的菜单方法
实例如下: $(function(){ $(document).bind("click",function(e){ //id为menu的是菜单 if($(e.target).closest("#menu").length == 0 && $(e.target).closest("input").length == 0){ //点击id为menu之外且id,则触发 hideMenu(); } }) }) 以上这篇js点击时关闭该范围
-
jQuery点击页面其他部分隐藏下拉菜单功能
一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,该怎么办呢?只能用js这老大哥来控制了. 二.代码 HTML: <div class="select_box" id="selected"> <div class="select"> <sp
-
JavaScript实现鼠标经过显示下拉框
本文实例为大家分享了JavaScript实现鼠标经过显示下拉框的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
-
bootstrap下拉菜单使用方法解析
Bootstrap框架中的下拉菜单组件是一个独立的组件,具体来学习一下 下拉菜单(Dropdown) ☑ LESS版本:对应的源文件dropdowns.less <h3>示例1</h3> <div class="navbar navbar-default" id="navmenu"> <a href="##" class="navbar-brand">W3cplus</a&
-
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <link rel="
-
JS组件Bootstrap实现下拉菜单效果代码
Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容:
-
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫) 关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框 看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的某一项,菜单