最近、同社はブートストラップメニュー機能を使用して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'）;
}）;
この方法では、トップメニューをクリックするだけでなく、スタイルを失うこともなく、ブートストラップマウスのホバリングの問題も解決できます。誰にでもお勧めします。