リンクをクリックした後に Bootstrap の折りたたみメニューが開いたままにならないようにするにはどうすればよいですか?

ブートストラップ メニューの折りたたみ: 永続パネルの問題への取り組み

レスポンシブ Web デザインの領域では、Bootstrap の折りたたみ可能なナビゲーション メニューが主力となっています。ただし、特有の問題が発生する可能性があります。小さい画面ではメニューが正常に折りたたまれますが、メニュー リンクをクリックしてもメニューを元に戻すことができません。これにより、ユーザーが展開されたメニューで立ち往生し、シームレスなナビゲーションが妨げられる可能性があります。

解決策の公開: JavaScript のイベント処理の活用

このジレンマを解決する鍵はイベントの伝播にありますそしてターゲットを絞ったイベント委任。ドキュメント本文のクリックをリッスンし、ターゲット要素がアンカー タグであるかどうかを確認することで、ユーザーが意図した場合にのみメニューをプログラム的に折りたたむことができます。これは、次の JavaScript コードを使用してエレガントに実現できます。

$(document).on('click', '.navbar-collapse.in', function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

潜在的なサブメニューの干渉への対処

サブメニューを操作する場合、前述のコードは微妙な落とし穴に遭遇する可能性があります。サブメニューのトグル要素をクリックすると、親メニューが誤って折りたたまれる場合があります。この意図しない動作を防ぐには、コードの洗練されたバージョンが必要です。

$(document).on('click', '.navbar-collapse.in', function(e) {
    if( $(e.target).is('a:not(".dropdown-toggle")') ) {
        $(this).collapse('hide');
    }
});

イベント ロジックからドロップダウン トグル要素を除外することで、サブメニュー ボタンをクリックしてもメイン メニューが途中で閉じないようにします。

動的ナビゲーションの強化

このソリューションの美しさは、その動的な性質にあります。イベント リスナーはドキュメント全体にバインドされているため、メニュー リンクが追加または削除されても、折りたたみ動作はそのまま残ります。この適応性により、静的な Web ページと適応可能な Web ページの両方でのシームレスなナビゲーションが保証されます。

以上がリンクをクリックした後に Bootstrap の折りたたみメニューが開いたままにならないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。