Bootstrap 3のドロップダウンがクリックしても閉じない問題の解決方法

1. クリックイベントの停止伝播（Stop Propagation）: ドロップダウンメニュー内の要素がクリックされた場合、イベントが親要素に伝播してドロップダウンが閉じないことがあります。これを防ぐために、クリックイベントの伝播を停止することができます。

$('.dropdown-menu').on('click', function (e) {
  e.stopPropagation();
});

2. ドキュメント全体のクリックイベントの監視: ドロップダウンメニューが開いている状態でドキュメントの他の場所がクリックされた場合、ドロップダウンが閉じるようにするには、ドキュメント全体でクリックイベントを監視する必要があります。

$(document).on('click', function (e) {
  if (!$('.dropdown-toggle').is(e.target) && $('.dropdown-toggle').has(e.target).length === 0) {
    $('.dropdown-toggle').parent().removeClass('open');
  }
});

3. ドロップダウンメニューのクリックイベントのカスタム制御: ドロップダウンメニューのクリックイベントをカスタム制御し、必要な処理を追加することもできます。

$('.dropdown-toggle').on('click', function () {
  if ($(this).parent().hasClass('open')) {
    // ドロップダウンが既に開いている場合の処理
    $(this).parent().removeClass('open');
  } else {
    // ドロップダウンを開く場合の処理
    $(this).parent().addClass('open');
  }
});