BootStrapのドロップダウンメニューの中にタブメニューをいれたい

Question

bootstrapのドロップダウンメニューではリンクしか想定されていないため、中身をクリックしてもメニューが消えてしまうためそれを防ぐために以下のコードを使ってそれを防ぐことはわかったのですが、

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

このコードをいれると中身のタブ変更のjsが動かなくなり、困っています。BootStrapのJsの仕様を変えるか、中身のタブだけBootStrapを使わずに実装するのがいいのか、最適な解決策を教えてくれると助かります。以下htmlです。

<div class="dropdown">
<button class="btn btn-default" type="button" id="messages" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
ボタン
</button>
<div class="dropdown-menu" aria-labelledby="messages">
<ul class="nav nav-tabs">
<li class="active"><a href="#touhoku2" data-toggle="tab">東北地方</a></li>
<li><a href="#kantou2" data-toggle="tab">関東地方</a></li>
<li><a href="#chuubu2" data-toggle="tab">中部地方</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="touhoku2">
<p>青森県・岩手県・宮城県・秋田県・山形県・福島県</p>
</div>
<div class="tab-pane fade" id="kantou2">
<p>茨城県・栃木県・群馬県・埼玉県・千葉県・東京都・神奈川県</p>
</div>
<div class="tab-pane fade" id="chuubu2">
<p>新潟県・富山県・石川県・福井県・山梨県・長野県・岐阜県・静岡県・愛知県</p>
</div>
</div>
</div>
</div>

Answer 1

BootStrapのJsの仕様を変えるか、中身のタブだけBootStrapを使わずに実装するのがいいのか

どちらの操作も必要ありません。現在の質問文のコードに少し変更を加えるだけで、そのコードは質問者さんの意図通りに動作するようになります。

---

まず、タブ ([data-toggle="tab"]) をターゲットとしてクリックイベントを設定し、そこでイベントの伝播を抑止します。これにより、タブをクリックしたときにドロップダウンが閉じてしまう現象が改善されます (動作確認用リンク)。

$(`[data-toggle="tab"]`).on("click", function(e) {
	e.stopPropagation();
});

次に、 $().tab メソッドを使用します。$().tab メソッドは、タブとして使用されている要素を指定すると、そのタブと紐付けられているペインがアクティブになります。

.tab(‘show’)

Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (for example, before the shown.bs.tab event occurs).

つまり、タブをクリックしたときにイベントの伝播を抑制した上で、クリックされたタブ要素を指定した $().tab メソッドを呼び出せば、質問者さんの実現したいことが行えるということです。このとおりのコードを書くと以下のようになり、タブの遷移が正常に行えるようになります (動作確認用リンク)。

$(`[data-toggle="tab"]`).on("click", function(e) {
  e.stopPropagation();
  $(this).tab("show");
});

Comments

[KoheiOkazaki]

ありがとうございます！解決できました。