JS組件Bootstrap dropdown組件擴(kuò)展hover事件
bootstrap導(dǎo)航條當(dāng)中dropdown組件用得特別頻繁,本文就為大家介紹bootstrap中的dropdown組件擴(kuò)展hover事件,具體內(nèi)容如下
如何實(shí)現(xiàn)這個(gè)hover事件呢,其實(shí)在dropdown組件的點(diǎn)擊事件的基礎(chǔ)上很好完成的。細(xì)心者可以發(fā)現(xiàn),下拉框出現(xiàn)時(shí),其父級會(huì)有一個(gè)open的class屬性。我們只需要監(jiān)聽hover事件時(shí),給父級增加或刪除open類就可以了。
boostrap-hover-dropdown.js插件,托管在github上的代碼網(wǎng)址:查看
下面是完整的js插件代碼:
// bootstrap響應(yīng)式導(dǎo)航條<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);
可以看到作者在插件前面加了個(gè)分號(hào);,增加了插件的兼容性,因?yàn)榭赡苌弦粋€(gè)js代碼沒寫;,如果在此不加分號(hào)則可能因?yàn)闆]換行導(dǎo)致js出錯(cuò)。
可選參數(shù)
delay: (可選參數(shù)) 在毫秒的延遲。這是等待的時(shí)間之前關(guān)閉下拉當(dāng)鼠標(biāo)不再在下拉菜單或按鈕/導(dǎo)航項(xiàng)目,激活它。默認(rèn)值 500。
instantlyCloseOthers: (可選參數(shù)) 一個(gè)布爾值,如果為真,將立即關(guān)閉所有其他下拉菜單的使用當(dāng)您啟動(dòng)一個(gè)新的選擇器匹配導(dǎo)航。默認(rèn)值 true。
加上以上js代碼后,此時(shí)效果還實(shí)現(xiàn)不了,因?yàn)槲覀冞€需要再做一步,就是給元素加上data-*屬性:
data-hover="dropdown"
完整的HTML元素代碼:
可以通過數(shù)據(jù)屬性設(shè)置選項(xiàng),也可以通過data-delay和data-close-others來設(shè)置選項(xiàng)
當(dāng)然,還有最簡單的方法,那就是用css的hover控制
[/code].nav> li:hover .dropdown-menu {display: block;}[/code]
這樣一句代碼也能實(shí)現(xiàn)想要的hover效果,只不過如果在hover的時(shí)候點(diǎn)擊組件,再去hover另一個(gè)組件就會(huì)出現(xiàn)如下效果:
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是為大家分享的Bootstrap dropdown組件擴(kuò)展hover事件使用方法,希望對大家熟練掌握hover事件有所幫助。
- 詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單
- bootstrap如何讓dropdown menu按鈕式下拉框長度一致
- Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼
- Bootstrap CSS組件之下拉菜單(dropdown)
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- JQuery組件基于Bootstrap的DropDownList(完整版)
- 創(chuàng)建基于Bootstrap的下拉菜單的DropDownList的JQuery插件
- 基于Bootstrap里面的Button dropdown打造自定義select
- Bootstrap模塊dropdown實(shí)現(xiàn)下拉框響應(yīng)
- Bootstrap 下拉菜單.dropdown的具體使用方法
相關(guān)文章
微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問題解決
這篇文章主要介紹了微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼
這篇文章主要介紹了微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼,代碼塊是從微信開發(fā)文檔中心復(fù)制的代碼塊,在此基礎(chǔ)上修改官方swiper樣式,需要的朋友可以參考下2018-07-07JavaScript如何實(shí)現(xiàn)防止重復(fù)的網(wǎng)絡(luò)請求的示例
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)防止重復(fù)的網(wǎng)絡(luò)請求的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01JS實(shí)現(xiàn)拖動(dòng)滾動(dòng)條評分的效果代碼分享
本文給大家基于js實(shí)現(xiàn)拖動(dòng)滾動(dòng)條評分效果,在項(xiàng)目開發(fā)中經(jīng)常可以用到的,大家可以更加需要適當(dāng)?shù)奶砑有薷模瑢s評分效果感興趣的朋友一起看看吧2016-09-09JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格抽獎(jiǎng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06JS如何調(diào)用WebAssembly編譯出來的.wasm文件
這篇文章主要介紹了關(guān)于WebAssembly編譯出來的.wasm文件js如何調(diào)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11