DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Bootstrap導航條可點擊和鼠標懸停顯示下拉菜單
Bootstrap導航條可點擊和鼠標懸停顯示下拉菜單
編輯:關於JavaScript     

使用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實現鼠標懸停自動打開下拉列表框 
Bootstrap的導航條下拉菜單為了適應移動設備沒有鼠標hover的狀態,都是點擊彈出下拉菜單,為了適應一般網站使用,我稍作了一些修改,鼠標hover時就彈出二級菜單。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap導航條鼠標懸停下拉菜單</title>
<link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">
<script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
<script id="bootstrap_221" type="text/javascript" class="library" src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <div class="span12">
  <h1>Bootstrap導航條鼠標懸停下拉菜單</h1>
  <p>Bootstrap的導航條下拉菜單為了適應移動設備沒有鼠標hover的狀態,都是點擊彈出下拉菜單,為了適應一般網站使用,我稍作了一些修改,鼠標hover時就彈出二級菜單。</p>
  <div class="navbar">
   <div class="navbar-inner">
    <ul class="nav">
     <li><a href="#">Menu1</a></li>
     <li><a href="#">Menu2</a></li>
     <li class="dropdown"> <a href="#menu3">Menu3</a>
      <ul class="dropdown-menu">
       <li><a href="#menu7">Menu7</a></li>
       <li><a href="#menu8">Menu8</a></li>
      </ul>
     </li>
     <li><a href="#">Menu4</a></li>
     <li><a href="#">Menu5</a></li>
     <li><a href="#">Menu6</a></li>
    </ul>
   </div>
  </div>
 </div>
</div>
</body>
</html>

需要添加的CSS樣式如下:

.navbar .nav > li .dropdown-menu {
 margin: 0;
}
.navbar .nav > li:hover .dropdown-menu {
 display: block;
}

這樣就可以在Bootstrap中實現鼠標懸停的下拉菜單了

如果大家還想深入學習,可以點擊這裡進行學習,再為大家附3個精彩的專題:

Bootstrap學習教程

Bootstrap實戰教程

Bootstrap插件使用教程

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

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