DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Bootstrap 中下拉菜單修改成鼠標懸停直接顯示 原創
Bootstrap 中下拉菜單修改成鼠標懸停直接顯示 原創
編輯:關於JavaScript     

最近公司做網頁用到Bootstrap的菜單功能,要實現鼠標懸停顯示二級菜單,於是就研究了一下,大概有兩種方法。

第一種方法:修改樣式表

實際上比較簡單,只需要加一個css設置下hover的狀態,把下拉菜單設置成block,具體css:

復制代碼 代碼如下:
.nav > li:hover .dropdown-menu {display: block;}

這句css加在bootstrap.min.css之後出現的css中,你試下!

缺點:
1.相應的頂級菜單不可點擊
2.鼠標滑到二級菜單後,頂級菜單沒有樣式

第二種方法:利用JQuery的特性來實現

結合了網上的教程,利用JQuery中的兩個事件就可以解決問題,具體css:

復制代碼 代碼如下:
//關閉click.bs.dropdown.data-api事件,使頂級菜單可點擊
$(document).off('click.bs.dropdown.data-api');
//自動展開
$('.nav .dropdown').mouseenter(function(){
 $(this).addClass('open');
});
//自動關閉
$('.nav .dropdown').mouseleave(function(){
 $(this).removeClass('open');
});

這種方法不僅頂級菜單可以點擊,而且樣式也不會丟,而且能解決Bootstrap鼠標懸停的問題,推薦大家使用。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved