Bootstrap多級(jí)菜單的實(shí)現(xiàn)代碼
最近在用Bootstrap做一個(gè)項(xiàng)目的時(shí)候遇到一個(gè)問(wèn)題,官網(wǎng)上只給的二級(jí)菜單的用法,但是實(shí)際運(yùn)用肯定不止二級(jí)。 于是在網(wǎng)上看到一個(gè)第三方的工具:bootstrap-submenu,地址:https://github.com/vsn4ik/bootstrap-submenu
可以去下載源碼。
將bootstrap-submenu.js和bootstrap-submenu.css文件添加到項(xiàng)目中
在要實(shí)現(xiàn)多級(jí)導(dǎo)航的按鈕或a標(biāo)簽中添加:
<a href="#" rel="external nofollow" class="data-toggle" data-toggle="dropdown" data-submenu>
主要是最后的submenu這個(gè)。
然后再JS里面:
$(function () { $('[data-submenu]').submenupicker(); });
這樣就可以了
以上所述是小編給大家介紹的Bootstrap多級(jí)菜單的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序通過(guò)點(diǎn)擊事件跨頁(yè)面?zhèn)鲄⒓癲ata-方法傳參(data-)的示例詳解
在?vue?中,我們可以直接在點(diǎn)擊事件中放入傳遞的參數(shù)進(jìn)行傳參;然而微信小程序中并不適用這樣的寫(xiě)法,但是微信小程序可以通過(guò)自定義屬性從而綁定參數(shù)使用,這篇文章主要介紹了微信小程序通過(guò)點(diǎn)擊事件跨頁(yè)面?zhèn)鲄⒁约癲ata-方法傳參(data-),需要的朋友可以參考下2023-12-12微信小程序商城項(xiàng)目之商品屬性分類(lèi)(4)
這篇文章主要為大家詳細(xì)介紹了微信小程序商城項(xiàng)目之商品屬性值聯(lián)動(dòng)選擇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04js實(shí)現(xiàn)iframe跨頁(yè)面調(diào)用函數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)iframe跨頁(yè)面調(diào)用函數(shù)的方法,實(shí)例展示了iframe中父頁(yè)面調(diào)用子頁(yè)面和子頁(yè)面調(diào)用父頁(yè)面的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12jQuery實(shí)現(xiàn)div浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)div浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果,需要的朋友可以參考下2014-02-02ie與firefox下的event使用說(shuō)明與詳細(xì)區(qū)別
event是ie自帶的一個(gè)對(duì)象,而ff中不存在該對(duì)象,只能通過(guò)傳遞參數(shù)(并且惟一)的方式來(lái)實(shí)現(xiàn)event.2009-10-10模擬用戶點(diǎn)擊彈出新頁(yè)面不會(huì)被瀏覽器攔截
window.open被瀏覽器攔截導(dǎo)致頁(yè)面無(wú)法彈出,a標(biāo)簽的彈出就不會(huì)被瀏覽器攔截,下面有個(gè)不錯(cuò)的示例,大家可以學(xué)習(xí)下2014-04-04javascript實(shí)現(xiàn)自由編輯圖片代碼詳解
這篇文章主要介紹了javascript實(shí)現(xiàn)自由編輯圖片代碼詳解,在當(dāng)下的的前端項(xiàng)目中,圖片功能可以說(shuō)是非常常見(jiàn)的,圖片的展示、圖片的裁剪編輯、圖片的上傳等,那么我們的項(xiàng)目便來(lái)了個(gè)需求。,需要的朋友可以參考下2019-06-06