brootstrap 下拉菜單增加Hover 懸停觸發(fā)

發(fā)表時(shí)間：2021-3-11

發(fā)布人：葵宇科技

瀏覽次數(shù)：107

用了框架就感覺(jué)不想去寫(xiě)基礎(chǔ)的實(shí)現(xiàn)，總想著翻翻文檔看看有沒(méi)有相應(yīng)的功能支持，相信很多朋友都有這樣的感覺(jué)，形成對(duì)框架的依賴(lài)。本身bootstrap下拉菜單的觸發(fā)方式是點(diǎn)擊觸發(fā)，要增加懸停觸發(fā)其實(shí)非常簡(jiǎn)單，無(wú)非就是對(duì)象的顯示問(wèn)題，根本不需要去翻文檔浪費(fèi)時(shí)間，修改JS就更不要去折騰了。

原理非常簡(jiǎn)單，只需要使dropdown-menu對(duì)象dispaly:block就可以了。

1.給父對(duì)象增加個(gè)ID，樣式之類(lèi)的方便查找

<li class="xt"><a href="#" data-toggle="dropdown"

2.自己看

<style>

.nav

> li.xt:hover .dropdown-menu {display: block;}

</style>

就這么回事，無(wú)需糾結(jié)，簡(jiǎn)單實(shí)現(xiàn)就是王道

————————————————

版權(quán)聲明：本文為CSDN博主「葵宇科技」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/ynkui/article/details/114653908