brootstrap 下拉菜單增加Hover 懸停觸發

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

發布人(rén)：融晨科技

浏覽次數：105

用了(le／liǎo)框架就(jiù)感覺不(bù)想去寫基礎的(de)實現，總想着翻翻文檔看看有沒有相應的(de)功能支持，相信很多朋友都有這(zhè)樣的(de)感覺，形成對框架的(de)依賴。本身bootstrap下拉菜單的(de)觸發方式是(shì)點擊觸發，要(yào / yāo)增加懸停觸發其實非常簡單，無非就(jiù)是(shì)對象的(de)顯示問題，根本不(bù)需要(yào / yāo)去翻文檔浪費時(shí)間，修改JS就(jiù)更不(bù)要(yào / yāo)去折騰了(le／liǎo)。

原理非常簡單，隻需要(yào / yāo)使dropdown-menu對象dispaly:block就(jiù)可以(yǐ)了(le／liǎo)。

1.給父對象增加個(gè)ID，樣式之(zhī)類的(de)方便查找

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

2.自己看

<style>

.nav

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

</style>

就(jiù)這(zhè)麽回事，無需糾結，簡單實現就(jiù)是(shì)王道(dào)

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

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