最近、同社はブートストラップメニュー機能を使用してWebページを作成しました。マウスをホバリングしてセカンダリメニューを表示する必要があったため、私はそれを研究し、おそらく2つの方法があることを発見しました。
最初の方法:スタイルシートを変更します
実際、比較的簡単です。 CSSを追加してホバーの状態を設定し、ドロップダウンメニューをブロックするように設定するだけです。特定のCSSの場合:
コードコピーは次のとおりです。
.nav> li:hover .dropdown-menu {display:block;}
この文CSSは、bootstrap.min.cssの後に表示されるCSSに追加されます。
欠点:
1.対応するトップメニューをクリックすることはできません
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');
});
この方法では、トップメニューをクリックするだけでなく、スタイルを失うこともなく、ブートストラップマウスのホバリングの問題も解決できます。誰にでもお勧めします。