php实现鼠标悬停显示下拉菜单,JavaScript_Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码，使用Bootstrap导航条组件时，如 - phpStudy...

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导航条可点击和鼠标悬停显示下拉菜单的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！相关阅读:

免费必须升 Win10 Anniversary Update一周年更新版太强大

win10如何设置自动关机？win10自动关机设置教程

CodeIgniter配置之autoload.php自动加载用法分析

JS实现的自定义网页拖动类

深入理解Javascript作用域与变量提升

win10预览版10061 bug有哪些 win10预览版10061bug汇总

jQuery插件制作的实例教程

Android中layout属性大全

HTML5 canvas画矩形时出现边框样式不一致的解决方法

苹果系统怎么格式化U盘？MAC格式化U盘的方法

javascript数据结构之二叉搜索树实现方法

CSS3属性box-shadow使用指南

Android实战打飞机游戏之无限循环的背景图(2)

Java实现的文件过滤代码分享(按后辍过滤)