蜗牛789
主机测评与优惠

实现Bootstrap导航鼠标悬停下拉菜单及下拉主菜单可点击效果

Bootstrap是一个非常不错的前端框架,但是在实际的使用过程中还需要根据实际的需要再微调整,比如我们默认使用Bootstrap框架下拉菜单的时候主导航是无法点击打开页面的,以及下拉展开需要单击主菜单,如果我们需要实现主菜单可以点击打开,而且下拉菜单实现悬停下拉的效果则需要进行调整JS脚本。

第一、实现悬停下拉菜单效果

1、修改bootstrap.js文件

2、添加脚本

$(document).ready(function(){
dropdownOpen();
});
function dropdownOpen() {

var $dropdownLi = $(\’li.dropdown\’);

$dropdownLi.mouseover(function() {
$(this).addClass(\’open\’);
}).mouseout(function() {
$(this).removeClass(\’open\’);
});
}

添加脚本替换后可以实现鼠标悬停菜单下拉效果。

第二、实现主导航可点击打开

$(document).ready(function(){
$(document).off(\’click.bs.dropdown.data-api\’);
});

添加脚本到bootstrap.js文件中,可以实现主导航的可点击打开。

总结,这样我们的Bootstrap菜单导航可以实现鼠标悬停展开,以及主导航的点击打开。

About 蜗牛

【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。





评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址