腾讯分分彩独胆二期
智軟工作室主要是為寧波公司提供寧波網站建設,寧波網站制作,寧波做網站公司,寧波外貿網站建設公司,寧波網站優化等項目,以優質的服務,優惠的價格,深的客戶信賴。相信有你的加入我們的明天會更有動力!期待與你合作!
  • 寧波智軟設計工作室,打造寧波網站制作工作室頂級品牌
  • 智軟擁有專業的設計團隊
  • 多年網站建設團隊為你服務
  • 智軟期待與你合作
  • 我們的技能
  • 我們掌握的技能有:dreamweaver,flash,photoshop
  • 寧波高端網站建設服務公司
    2014已經悄然到來,在新的一年我們恭賀所有客戶事業蒸蒸日上,同事慶祝智軟設計工作室成立5周年,在5周年為眾多客戶提供了保質量的網站設計與網站制作。 我們在新的一年質量與服務將會更加進一步為更多的客戶帶來高端的網站設計與服務!期待與你合作
  • 企業網站制作建設原因與服務介紹

    智軟設計工作室多年為寧波企業網站制作建設服務一直以來我們以最優惠價格,最優質的質量,最突出的設計!得到了客戶的一致認可,我們的服務包括:寧波網站設計,寧波網站建設,寧波網站制作,寧波網站優化,寧波英文網站制作我們會以優質的服務,最低的價格來報答客戶!

  • 點擊鏈接網站優化推廣介紹

    點擊連接網站優化推廣-對企業的網站優化和網站推廣--對企業的重要性-點擊進行詳細了解

  • 2014開幕,寧波網站設計服務全面優惠.

    2014開幕,寧波智軟設計為寧波企業提供更加優秀的設計和實惠的價格

  • 鏈接到網站案例展示平臺
    智軟設計工作為寧波客戶網站設計案例展示平臺-案例均為定期更新,讓新老客戶更好的看到我們做的案例,點擊查看我們做的網站案例吧!
  • 我們寧波網絡公司提供網站一站式解決方案
    智軟(寧波網絡公司)幫你輕松解決網絡問題,網站一站式解決方案
你當前的位置:智軟工作室 > 營銷與網絡 >

Bootstrap菜單改成移動鼠標顯示

2019-05-12 21:03

  Bootstrap菜單改成移動鼠標顯示 Bootstrap導航條可點擊和鼠標懸停顯示下拉菜單

使用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;
}
更多

【責任編輯:小戴工程師】

關鍵字: 網頁LOGO 怒江機房 網絡營銷經驗 寧波明飛 考察 Wifi 62件事情 長尾關鍵字 怪現象 自制建站 品牌網站制作 網站內部連接 英文網站制作 研究報告 不注重 郵件營銷 成本是多少 小伎倆 電郵中文域名 SEO標準布局 網站建設知識 鏈接無效 logo創意 網站優化技巧 區別 運營策略 運營 重復內容 嚴打 寧波晶海

上一篇:dede 自定義字段textarea換行 內容摘要多行文本支持換行 下一篇:百度商橋不顯示的原因 解決方法

最新文章

2019-05-12 21:03

相關文章

2019-05-12 21:03
網站制作咨詢:
QQ:277728291
電話:18668277799
郵箱:[email protected]
期待你來電咨詢
回頂部
Copyright 2010 智軟工作室 版權所有    智軟為寧波公司提供最優惠的網絡服務【寧波網站建設,寧波網站制作公司,寧波做網站公司,寧波外貿網站建設公司】我們竭誠為你服務!
腾讯分分彩独胆二期 辛苦点能赚钱的工作 跑货车帮赚钱吗 梦幻140炼药怎么赚钱 极速11选5是国家开的吗 牧场物语 符文工厂3赚钱心得 玩什么微博可以赚钱的软件叫什么 熊猫麻将总是输 有什么规律 海南飞鱼彩票开奖结果 糖果捕鱼游戏网站 排列3kuadu走势图 金蟾捕鱼 无线收分 老公赚钱给老婆花老婆的谢谢你歌曲下载 大乐透胆拖投注中奖 577棋牌游戏官网 微信卖延时喷雾赚钱吗 查询四川快乐12开奖号码