使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~
首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句:
rush:js;">
// 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了,代码如下:
rush:js;">
$(document).ready(function(){
$(document).off('click.bs.dropdown.data-api');
});
以上代码测试有效,导航条可点击问题解决,下面解决鼠标悬停弹下拉菜单问题,这个相对简单些,用JQuery的鼠标事件就可实现,代码如下:
rush:js;">
$(document).ready(function(){
dropdownopen();//调用
});
/**
* 鼠标划过就展开子菜单,免得需要点击才能展开
*/
function dropdownopen() {
var $dropdownLi = $('li.dropdown');
$dropdownLi.mouSEOver(function() {
$(this).addClass('open');
}).mouSEOut(function() {
$(this).removeClass('open');
});
}
以上所述是小编给大家介绍的Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。