クリック時にブートストラップの応答性メニューを閉じるにはどうすればよいですか?

クリック時にブートストラップ レスポンシブ メニューを閉じる

モバイル デバイスで Web サイトを表示する場合、ナビゲーション メニューの使用が面倒になることがよくあります。ユーザーエクスペリエンスを向上させるには、メニュー項目がクリックされたときに応答型ナビゲーションバーを自動的に閉じ、必要なコンテンツのみを表示することが望ましいです。

ただし、$('.btn-navbar').click( ) または $('.nav-collapse').toggle() を使用すると、メニューが一時的に縮小するなど、デスクトップ ビューに望ましくない影響が生じる可能性があります。より効率的な解決策として、次の対策を検討してください。

データ属性セレクターの使用

メニュー項目をクリックすると応答性メニューが閉じるように指定するには、data-toggle="collapse" と次の例に示すように、data-target=".navbar-collapse" 属性は、対応する 要素に属します。

<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>

画面サイズ固有のクラスをメニュー項目に割り当てると、これらの問題が効果的に解決され、デバイスのサイズに関係なくシームレスな操作が保証されます。

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

Bootstrap v4.1.3 および v5.0 の場合、表示クラス/非表示クラスはそれぞれ d-none/d-sm-block および d-block/d-sm-none に置き換える必要があります。

Bootstrap v5 では、data-toggle 属性と data-target 属性をそれぞれ data-bs-toggle と data-bs-target に置き換えます。

これらのガイドラインに従うことで、応答性の高い Bootstrap ナビゲーション メニューが自動的に閉じるようにすることができます。メニュー項目をクリックすると、強化されたユーザー エクスペリエンスが提供されます。

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