「dropdown-submenu」の削除後にブートストラップでドロップダウンサブメニューを作成するにはどうすればよいですか?

ブートストラップのドロップダウン サブメニュー機能の削除

ブートストラップ 3 では、ドロップダウン サブメニュー クラスが削除されました。このクラスは、メインのドロップダウンの下にネストされたサブメニューを作成するクリーンな方法を提供しました。しかし、Bootstrap の作成者は、特にモバイル環境ではサブメニューが廃止されたと判断しました。

サブメニュー機能の代替オプション

CSS のみのメソッド:

Bootstrap 5 では、JavaScript または CSS を使用してサブメニューを実現できます機能:

ホバー時の CSS のみの Navbar サブメニュー

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

ホバー時の CSS のみの Navbar サブメニュー (右揃え)

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}
.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

の JavaScript メソッドブートストラップ 5:

その先へCSS のみのオプションですが、JavaScript を使用して Bootstrap 5 のサブメニュー機能を実装することもできます:

let dropdowns = document.querySelectorAll('.dropdown-toggle');
dropdowns.forEach((dd) => {
    dd.addEventListener('click', function (e) {
        var el = this.nextElementSibling;
        el.style.display = el.style.display==='block'?'none':'block';
    })
});

Bootstrap 3 の CSS メソッド:

Dropdown-submenu クラスを使用しても、Bootstrap 3 でサブメニュー機能を実装できます。 CSS:

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}

結論

特定のサブメニュー クラスは利用できなくなりましたが、ニーズやバージョンに応じて、Bootstrap でドロップダウン サブメニューを作成するために使用できる代替アプローチがいくつかあります。を使用しています。

以上が「dropdown-submenu」の削除後にブートストラップでドロップダウンサブメニューを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。