Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
1个回答
展开全部
使用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导航条可点击和鼠标悬停显示下拉菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是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导航条可点击和鼠标悬停显示下拉菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询