欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單

 更新時(shí)間：2016年11月25日 08:38:57   作者：my98800  
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用Bootstrap導(dǎo)航條組件時(shí)，如果你的導(dǎo)航條帶有下拉菜單，那么這個(gè)帶下拉菜單的導(dǎo)航在點(diǎn)擊時(shí)只會(huì)浮出下拉菜單，它本身的href屬性會(huì)失效，也就是失去了超鏈接功能，這并不是我想要的，我希望導(dǎo)航條的鏈接可以正常打開(kāi)它的鏈接，但又需要下拉菜單功能，開(kāi)始折騰~

首先解決帶下拉菜單的導(dǎo)航條可以點(diǎn)擊問(wèn)題，下拉菜單效果是JS實(shí)現(xiàn)的，分析bootstrap.js文件發(fā)現(xiàn)，Bootstrap把下拉菜單寫(xiě)成了一個(gè)JQuery插件，在dropdown代碼段中找到了關(guān)鍵的幾句：

 // 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)

找到幾句關(guān)鍵代碼后，想到了解決辦法，只要把其中click.bs.dropdown.data-api事件關(guān)閉就OK了，代碼如下：

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

以上代碼測(cè)試有效，導(dǎo)航條可點(diǎn)擊問(wèn)題解決，下面解決鼠標(biāo)懸停彈下拉菜單問(wèn)題，這個(gè)相對(duì)簡(jiǎn)單些，用JQuery的鼠標(biāo)事件就可實(shí)現(xiàn)，代碼如下：

$(document).ready(function(){
 dropdownOpen();//調(diào)用
});
/**
 * 鼠標(biāo)劃過(guò)就展開(kāi)子菜單，免得需要點(diǎn)擊才能展開(kāi)
 */
function dropdownOpen() {

 var $dropdownLi = $('li.dropdown');

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

小編再為大家分享一個(gè)例子：bootstrap實(shí)現(xiàn)鼠標(biāo)懸停自動(dòng)打開(kāi)下拉列表框 
Bootstrap的導(dǎo)航條下拉菜單為了適應(yīng)移動(dòng)設(shè)備沒(méi)有鼠標(biāo)hover的狀態(tài)，都是點(diǎn)擊彈出下拉菜單，為了適應(yīng)一般網(wǎng)站使用，我稍作了一些修改，鼠標(biāo)hover時(shí)就彈出二級(jí)菜單。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap導(dǎo)航條鼠標(biāo)懸停下拉菜單</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導(dǎo)航條鼠標(biāo)懸停下拉菜單</h1>
  <p>Bootstrap的導(dǎo)航條下拉菜單為了適應(yīng)移動(dòng)設(shè)備沒(méi)有鼠標(biāo)hover的狀態(tài)，都是點(diǎn)擊彈出下拉菜單，為了適應(yīng)一般網(wǎng)站使用，我稍作了一些修改，鼠標(biāo)hover時(shí)就彈出二級(jí)菜單。</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中實(shí)現(xiàn)鼠標(biāo)懸停的下拉菜單了

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論