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

 更新时间:2016年06月23日 11:20:42   作者:微笑的鱼  
这篇文章主要介绍了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导航条可点击和鼠标悬停显示下拉菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • javascript 同时在IE和FireFox获取KeyCode的代码

    javascript 同时在IE和FireFox获取KeyCode的代码

    以前一直在IE8中测试网站,后来写的一部分含有Ajax的代码出现了故障,不得已下载了Firefox以及它的插件Firebug,才发现,FF不支持windows.event事件。于是换了一种思路。
    2010-02-02
  • Javascript实现图片懒加载插件的方法

    Javascript实现图片懒加载插件的方法

    最近由于公司项目需要,要利用Javascript实现图片懒加载效果,尝试起来发现并不难,于是将自己的实现过程分享出来给大家学习和参考,希望对有需要的朋友们带来一定的帮助,感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • 微信小程序实现流程进度的图样式功能

    微信小程序实现流程进度的图样式功能

    最近正在做微信小程序,需要实现一个流程进度的图样式,下面小编给大家带来了微信小程序实现流程进度的图样式功能实例代码,需要的朋友参考下吧
    2018-01-01
  • JavaScript如何实现图片处理与合成

    JavaScript如何实现图片处理与合成

    这篇文章主要介绍了JavaScript如何实现图片处理与合成,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 微信小程序自定义顶部组件customHeader的示例代码

    微信小程序自定义顶部组件customHeader的示例代码

    这篇文章主要介绍了微信小程序自定义顶部组件customHeader的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 简单理解js的prototype属性及使用

    简单理解js的prototype属性及使用

    这篇文章主要介绍了简单理解js的prototype属性及使用 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • js 链式延迟执行DOME

    js 链式延迟执行DOME

    js 链式延迟执行DOME,需要的朋友可以参考下。
    2012-01-01
  • JavaScript实现的内存数据库LokiJS介绍和入门实例

    JavaScript实现的内存数据库LokiJS介绍和入门实例

    这篇文章主要介绍了JavaScript实现的内存数据库LokiJS介绍和入门实例,LokiJS是一个内存数据库,将性能考虑放在第一位,使用JavaScript编写,需要的朋友可以参考下
    2014-11-11
  • js实现表单Radio切换效果的方法

    js实现表单Radio切换效果的方法

    这篇文章主要介绍了js实现表单Radio切换效果的方法,涉及javascript实现页面元素的隐藏与显示及复选框的遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 最短的IE判断代码

    最短的IE判断代码

    以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。
    2011-03-03

最新评论