Bootstrap 3 の折りたたまれたナビゲーションが、メニュー リンクをクリックした後も開いたままになるのはなぜですか?

メニュー リンクをクリックした後も、Bootstrap 3 の折りたたまれたナビゲーションが開いたままになる

一般的な Bootstrap 3 のナビゲーション設定では、折りたたまれたメニュー内のメニュー リンクをクリックすると、メニューが自動的に閉じられるはずです。ただし、一部のユーザーは、メニュー リンクの選択後にメニューが開いたままになるという問題に遭遇しました。

問題の理解

この問題は、ブートストラップのデフォルトの動作が折りたたまれるために発生します。このプラグインは、トリガー ボタンがクリックされたときに要素の表示/非表示を切り替えることです。これは、メニュー リンクを含め、折りたたまれたメニュー自体をクリックしても、折りたたむアクションはトリガーされないことを意味します。

解決策

この問題を解決するには、JavaScript イベント リスナーを使用します。ドキュメントに追加できます。このリスナーは、ユーザーが折りたたまれたナビゲーション内をクリックしたことを検出し、それを自動的に非表示にします。コード例は次のとおりです。

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

説明

• $(document).on は、セレクターに一致する要素をクリックするために、イベント リスナーをドキュメントにバインドします。 .navbar-collapse.in。これにより、ナビゲーションが折りたたまれている場合にのみイベントがトリガーされるようになります。
• if 条件は、クリックされた要素 (e.target) がアンカー であるかどうかをチェックします。ドロップダウン トグルではないタグ (「.dropdown-toggle」)。ドロップダウン トグルは、サブメニューにアクセスするときにメニューが折りたたまれるのを防ぐために除外されます。
• 条件が満たされる場合、クリックされた要素で Collapse('hide') メソッドが呼び出され、ナビゲーションが折りたたまれます。

このソリューションにより、ユーザーがメニュー リンクをクリックすると折りたたまれたメニューが自動的に閉じられ、シームレスでユーザー フレンドリーなナビゲーション エクスペリエンスが提供されます。

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