Bootstrap のドロップダウン メニューをマウス ホバー時に直接表示するように変更 [オリジナル]_javascript スキル

最近、会社でWebページを作成する際にBootstrapのメニュー機能を利用し、マウスホバー時に補助メニューを表示させたいと思ったので調べてみたところ、おそらく2つの方法があることが分かりました。

最初の方法: スタイルシートを変更する

実際には、CSS を追加してホバー ステータスを設定し、ドロップダウン メニューをブロックするように設定するだけです。

コードをコピーします コードは次のとおりです:

.nav > li:hover .dropdown-menu {表示: ブロック;}

この CSS は bootstrap.min.css の後に表示される CSS に追加されます。

欠点:
1. 対応するトップレベルのメニューはクリックできません
2. マウスを第 2 レベルのメニューまでスライドさせた後、トップレベルのメニューにはスタイルがありません

2 番目の方法: JQuery の機能を使用して

を実現します

オンライン チュートリアルと組み合わせて、JQuery の 2 つのイベントと特定の CSS を使用することで、この問題を解決できます。

コードをコピーします コードは次のとおりです:

// click.bs.dropdown.data-api イベントを閉じて、トップメニューをクリック可能にします
$(document).off('click.bs.dropdown.data-api');
//自動的に展開
$('.nav .dropdown').mouseenter(function(){
$(this).addClass('open');
});
//自動的に閉じます
$('.nav .dropdown').mouseleave(function(){
$(this).removeClass('open');
});

この方法は、トップメニューをクリックできるだけでなく、Bootstrap のマウスホバリングの問題も解決できます。