实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~

首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句:

?
1
2
3
4
5
6
7
8
// 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了,代码如下:

?
1
2
3
$(document).ready( function (){
     $(document).off( 'click.bs.dropdown.data-api' );
});

以上代码测试有效,导航条可点击问题解决,下面解决鼠标悬停弹下拉菜单问题,这个相对简单些,用JQuery的鼠标事件就可实现,代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready( function (){
     dropdownOpen(); //调用
});
/**
  * 鼠标划过就展开子菜单,免得需要点击才能展开
  */
function dropdownOpen() {
 
     var $dropdownLi = $( 'li.dropdown' );
 
     $dropdownLi.mouseover( function () {
         $( this ).addClass( 'open' );
     }).mouseout( function () {
         $( this ).removeClass( 'open' );
     });
}

你可能感兴趣的:(bootstrap,前端开发)