实现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‘);
	});
}

时间: 2024-12-31 16:27:33

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

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

在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4

bootstrap怎么设置下拉菜单不点击,改成鼠标悬停直接显示下拉菜单

方法一: 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css:.nav > li:hover .dropdown-menu {display: block;} 但是主导航失去链接的效果! 方法二: 不仅可以解决Bootstrap鼠标悬停的问题,还可以让一个菜单恢复链接实现点击下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句:$(docum

easyui 点击combox 文本框 显示下拉 panel

$(".combo-text").click(function () { var mid = $(this).parent().parent().find("select").attr("id"); $("#" + mid).combobox("showPanel"); });

js 点击按钮显示下拉菜单

<li> <a id = "rank" onclick="showGroup()"></a></li><li id = "buttonGroup" style="display: none"> <a href="#"> </a> <a href="#"> </a> </li&

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

打开includes\templates\lightinthebox\common\tpl_box_dropdown_categories_css.php 1.将大约23行代码 <ul id="menu_index_top"> <li> 改成 <ul id="menu_index_top"> <li id="litbBtna"> 2.在53行 menuToggle('litbBtn','mouseo

创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉菜单的文本框就是其中之一,效果图如下(真要自己完全设计,还得费一番功夫)   关于该组件的详情参看Bootstrap官网.带下拉菜单的文本框   看到上面的效果图,使我想到WinForm编程中的DropDownList控件.不过,和DropDownList控件相比,还缺少以下内容 1.当点击菜单中的

响应式WEB设计:将导航菜单转换成下拉菜单以适应小屏幕设备

移动互联网时代的到来,使得我们在进行页面设计与开发时,应当根据用户行为以及设备环境(系统平台.屏幕尺寸)进行相应的响应和调整,这个理念也叫响应式WEB设计.今天我将给大家讲解当屏幕尺寸变小时,将横向菜单转换成下拉菜单的效果. 本文使用了HTML5标签以及CSS3技术,您在查看demo时需要您的浏览器支持HTML5和CSS3,建议使用Chrome,Firefox或者IE9等现代浏览器. HTML <nav> <ul> <li><a href="/"

1.鼠标点击换样式+2.下拉菜单缓慢显示/隐藏样式效果

1.鼠标点击换样式 <style type="text/css"> .aa{ width:90px; height:60px;text-align:center; vertical-align:middle; line-height:60px; margin-right:10px; font-size:19px; float:left; background-color:#06F} </style> <body> <div style=&quo

Bootstrap&lt;基础十四&gt; 按钮下拉菜单

使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单. 下面的实例演示了一个基本的简单的按钮下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的按钮下拉菜单&