ブートストラップで製品メニューをクリックしてレスポンシブナビゲーションを閉じる方法?

ブートストラップで製品メニューをクリックしてレスポンシブ ナビゲーションを閉じる

レスポンシブ モードでメイン メニューを展開すると、次のときに自動的に折りたたまれる問題が発生する可能性があります。 「製品」メニュー項目をクリックします。これを解決するには、Bootstrap の組み込みデータ属性とクラスを利用できます。

追加の JavaScript を利用する代わりに、次のデータ属性をメニュー リスト項目に追加します。

これを繰り返します。

レスポンシブ デザインの追加調整

大きな画面でのコンテンツのオーバーフローやちらつきの問題に対処するには、次のコードを使用します:

これにより、画面サイズに基づいて特定のデータ属性が割り当てられ、デスクトップ メニューの不具合が解消されます。

ブートストラップ バージョンの更新

ブートストラップ バージョン 4.1.3 および 5.0 の場合、表示/非表示クラスを d-none d-sm-block および d-block d-sm-none に置き換えます。

Bootstrap 5 で、データ属性を data-bs-toggle および data-bs に変更します。 -target.

これらの調整により、さまざまな画面サイズでも機能的に問題なく、応答性の高いナビゲーション バーを自動的に閉じて製品メニューを表示できます。

以上がブートストラップで製品メニューをクリックしてレスポンシブナビゲーションを閉じる方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。