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数组的内置方法，介绍的非常详解，具有参考借鉴价值，感兴趣的朋友一起学习吧，希望能够给你带来帮助2021-09-09
这篇文章主要为大家详细介绍了js实现轮播图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)
inputSuggest在文本框输入字符时提示，类似Windows的“自动完成”功能，当在文本框输入字符时，与此相关的内容会显示在文本框的下边，你可随时使用键盘或鼠标点选那些提示，你就不用输入了2012-05-05
本文主要分享了原生js实现返回顶部缓冲效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了如何使用JavaScript修改浏览器URL地址栏，需要的朋友可以参考下2013-10-10
本文主要介绍了微信小程序商城分类滚动列表锚点的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了javascript代码实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
Javascript封装id、class与元素选择器方法示例
这篇文章主要给大家介绍了Javascript封装id、class与元素选择器的方法，文中给出了详细的示例代码，对大家的理解和学习具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-03-03
javascript之Partial Application学习
在数学中，一个函数是描述每个输入值对应唯一输出值的这种对应关系，符号为 f(x)。例如，表达式 f(x)=x2表示了一个函数 f，其中每个输入值x都与唯一输出值x2相联系2013-01-01
这篇文章主要为大家详细介绍了微信小程序实现底部弹窗，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论