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的代码
以前一直在IE8中测试网站,后来写的一部分含有Ajax的代码出现了故障,不得已下载了Firefox以及它的插件Firebug,才发现,FF不支持windows.event事件。于是换了一种思路。2010-02-02JavaScript实现的内存数据库LokiJS介绍和入门实例
这篇文章主要介绍了JavaScript实现的内存数据库LokiJS介绍和入门实例,LokiJS是一个内存数据库,将性能考虑放在第一位,使用JavaScript编写,需要的朋友可以参考下2014-11-11
最新评论