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

JS組件Bootstrap dropdown組件擴展hover事件

 更新時間:2016年04月17日 09:20:19   作者:請把姓名返給我  
bootstrap的下拉組件,需要點擊click時,方可展示下拉列表。因此對于喜歡簡單少操作的大家來說,點擊一下多少帶來不便,因此,引入hover監(jiān)聽,鼠標經(jīng)過自動展示下拉框。這篇文章主要介紹了JS組件Bootstrap dropdown組件擴展hover事件,感興趣的小伙伴們可以參考一下

bootstrap導航條當中dropdown組件用得特別頻繁,本文就為大家介紹bootstrap中的dropdown組件擴展hover事件,具體內(nèi)容如下

如何實現(xiàn)這個hover事件呢,其實在dropdown組件的點擊事件的基礎上很好完成的。細心者可以發(fā)現(xiàn),下拉框出現(xiàn)時,其父級會有一個open的class屬性。我們只需要監(jiān)聽hover事件時,給父級增加或刪除open類就可以了。

boostrap-hover-dropdown.js插件,托管在github上的代碼網(wǎng)址:查看

下面是完整的js插件代碼:

// bootstrap響應式導航條<br>;(function($, window, undefined) {
 // outside the scope of the jQuery plugin to
 // keep track of all dropdowns
 var $allDropdowns = $();
 
 // if instantlyCloseOthers is true, then it will instantly
 // shut other nav items when a new one is hovered over
 $.fn.dropdownHover = function(options) {
 
  // the element we really care about
  // is the dropdown-toggle's parent
  $allDropdowns = $allDropdowns.add(this.parent());
 
  return this.each(function() {
   var $this = $(this).parent(),
    defaults = {
     delay: 500,
     instantlyCloseOthers: true
    },
    data = {
     delay: $(this).data('delay'),
     instantlyCloseOthers: $(this).data('close-others')
    },
    options = $.extend(true, {}, defaults, options, data),
    timeout;
 
   $this.hover(function() {
    if(options.instantlyCloseOthers === true)
     $allDropdowns.removeClass('open');
 
    window.clearTimeout(timeout);
    $(this).addClass('open');
   }, function() {
    timeout = window.setTimeout(function() {
     $this.removeClass('open');
    }, options.delay);
   });
  });
 };
 
 $('[data-hover="dropdown"]').dropdownHover();
})(jQuery, this);

可以看到作者在插件前面加了個分號;,增加了插件的兼容性,因為可能上一個js代碼沒寫;,如果在此不加分號則可能因為沒換行導致js出錯。

可選參數(shù)
delay: (可選參數(shù)) 在毫秒的延遲。這是等待的時間之前關(guān)閉下拉當鼠標不再在下拉菜單或按鈕/導航項目,激活它。默認值 500。
instantlyCloseOthers: (可選參數(shù)) 一個布爾值,如果為真,將立即關(guān)閉所有其他下拉菜單的使用當您啟動一個新的選擇器匹配導航。默認值 true。

加上以上js代碼后,此時效果還實現(xiàn)不了,因為我們還需要再做一步,就是給元素加上data-*屬性:

data-hover="dropdown"
完整的HTML元素代碼:

復制代碼 代碼如下:
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown"></a>

可以通過數(shù)據(jù)屬性設置選項,也可以通過data-delay和data-close-others來設置選項

復制代碼 代碼如下:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false"></a>

當然,還有最簡單的方法,那就是用css的hover控制

[/code].nav> li:hover .dropdown-menu {display: block;}[/code]
這樣一句代碼也能實現(xiàn)想要的hover效果,只不過如果在hover的時候點擊組件,再去hover另一個組件就會出現(xiàn)如下效果:

如果大家還想深入學習,可以點擊這里進行學習,再為大家附兩個精彩的專題:Bootstrap學習教程 Bootstrap實戰(zhàn)教程

以上就是為大家分享的Bootstrap dropdown組件擴展hover事件使用方法,希望對大家熟練掌握hover事件有所幫助。

相關(guān)文章

  • 利用babel將es6語法轉(zhuǎn)es5的簡單示例

    利用babel將es6語法轉(zhuǎn)es5的簡單示例

    Babel是一個廣泛使用的轉(zhuǎn)碼器,babel可以將ES6代碼完美地轉(zhuǎn)換為ES5代碼,所以下面這篇文章就來給大家詳細介紹了關(guān)于利用babel將es6語法轉(zhuǎn)es5的相關(guān)資料,文章通過示例介紹的非常詳細,需要的朋友可以參考下。
    2017-12-12
  • 判斷瀏覽器的javascript版本的代碼

    判斷瀏覽器的javascript版本的代碼

    話說最近在研究某著名跟蹤系統(tǒng),在其給用戶的實施代碼中有一段判斷瀏覽器Javascript版本的代碼引起了我的注意,于是問了下google如何判斷瀏覽器的javascript版本
    2010-09-09
  • 微信小程序swiper使用網(wǎng)絡圖片不顯示問題解決

    微信小程序swiper使用網(wǎng)絡圖片不顯示問題解決

    這篇文章主要介紹了微信小程序swiper使用網(wǎng)絡圖片不顯示問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-12-12
  • 微信小程序修改swiper默認指示器樣式的實例代碼

    微信小程序修改swiper默認指示器樣式的實例代碼

    這篇文章主要介紹了微信小程序修改swiper默認指示器樣式的實例代碼,代碼塊是從微信開發(fā)文檔中心復制的代碼塊,在此基礎上修改官方swiper樣式,需要的朋友可以參考下
    2018-07-07
  • JavaScript如何實現(xiàn)防止重復的網(wǎng)絡請求的示例

    JavaScript如何實現(xiàn)防止重復的網(wǎng)絡請求的示例

    這篇文章主要介紹了JavaScript如何實現(xiàn)防止重復的網(wǎng)絡請求的示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-01-01
  • JS實現(xiàn)拖動滾動條評分的效果代碼分享

    JS實現(xiàn)拖動滾動條評分的效果代碼分享

    本文給大家基于js實現(xiàn)拖動滾動條評分效果,在項目開發(fā)中經(jīng)??梢杂玫降?,大家可以更加需要適當?shù)奶砑有薷?,對js評分效果感興趣的朋友一起看看吧
    2016-09-09
  • JavaScript實現(xiàn)九宮格抽獎

    JavaScript實現(xiàn)九宮格抽獎

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)九宮格抽獎,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • 微信小程序接入vant Weapp組件的詳細步驟

    微信小程序接入vant Weapp組件的詳細步驟

    這篇文章主要介紹了微信小程序接入vant Weapp組件的詳細步驟,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-10
  • JS如何調(diào)用WebAssembly編譯出來的.wasm文件

    JS如何調(diào)用WebAssembly編譯出來的.wasm文件

    這篇文章主要介紹了關(guān)于WebAssembly編譯出來的.wasm文件js如何調(diào)用,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-11-11
  • webpack將js打包后的map文件詳解

    webpack將js打包后的map文件詳解

    下面小編就為大家分享一篇webpack將js打包后的map文件詳解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02

最新評論