項目をクリックしたときにブートストラップ応答性メニューを自動的に閉じるにはどうすればよいですか?

ブートストラップ: メニュー項目の応答性メニューを自動的に閉じる

ブートストラップで応答性メニューを表示するときに、メニューを自動的に閉じることができます。デスクトップで開いた状態を維持しながら、モバイルまたはタブレット デバイスでメニュー項目をクリックした後。

問題:

ユーザーが $('.btn -navbar').click();および $('.nav-collapse').toggle();この動作を実現するには、デスクトップ上でメニューが予期せず縮小してしまいました。

解決策:

この問題を解決するには、メニュー項目を変更してデータ切り替えを含めます。ナビゲーションバーのトグルボタンの場合と同様に、データターゲット属性。たとえば、「製品」メニュー項目の場合:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

各メニュー項目に対してこれを繰り返します。

追加の修正:

宛先オーバーフローの問題やちらつきがある場合は、次のコードを追加します。

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

これにより、トグル セレクターとターゲット セレクターが画面サイズ固有になり、大きなメニューでの不具合が解消されます。

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

• ブートストラップ v4.1.3 および v5.0: 表示/非表示クラスを d-none d-sm-block および d-block d-sm に置き換えます。 -none.
• ブートストラップ v5: data-toggle を data-bs-toggle に置き換え、data-target を data-bs-target に置き換えます。

実装することによりこれらの変更により、デスクトップ デバイスでの機能を維持しながら、メニュー項目のクリック時に応答性メニューを自動的に閉じることができます。

以上が項目をクリックしたときにブートストラップ応答性メニューを自動的に閉じるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。