[Bootstrap]ナビゲーションバーで親メニューのリンクを生かしつつ、子メニューのドロップダウンも有効にする方法

Bootstrapの仕様上、ナビゲーションバーのメニューで子メニューを付けると、親メニューのリンクが効かなくなります。

WordPressなんかでは、カテゴリーの階層化をするのが普通です。たとえば、親カテゴリー「iPhone」の子カテゴリーとして「アプリ紹介」を作った場合、iPhoneカテゴリーのページも存在するし、アプリ紹介カテゴリーのページも存在します。

なのに、Bootstrapの標準機能メニューバーに子メニューも用意した場合、「iPhone」をクリックしてもリンクが機能しないのです。

それは困るということで調査したところ、jQueryの処理とHTMLコードの追加を行うことで解決したのでご紹介します。

親メニューの文字クリックで親リンク、他の位置で子メニューを表示する方法

今回の問題を解決するためには、HTML側とJavaScript側に処理を追加します。

HTMLにspanタグを追加

<nav role="navigation">
  <ul class="nav nav-justified">
    <li>トップページ</li>
    <li class="dropdown">
	    <a href="./oya.html" class="dropdown-toggle" data-toggle="dropdown"><span class="link-menu">親メニュー</span> <b class="caret"></b></a>
	    <ul class="dropdown-menu">
	      <li><a href="./ko1.html">子メニュー1</a></li>
	      <li><a href="./ko2.html">子メニュー2</a></li>
	      <li><a href="./ko3.html">子メニュー3</a></li>
	    </ul>
	  </li>
        <li><a href="./menu1.html">メニュー1</a></li>
        <li><a href="./menu2.html">メニュー2</a></li>
        <li><a href="./menu3.html">メニュー3</a></li>
  </ul>
</nav>

5行目の親メニュー名のところにspanを追加します。

<span class="link-menu">メニュー名</span>

今回は「link-menu」というクラス名を付けましたが、ここは好きな名前でOKです。これでHTML側のコード追加は終わり。

jQueryに処理を追加

次にjQueryで処理を追加します。ぼくはカスタマイズ用のJavaScriptファイルを作って以下の処理を追加しました。

jQuery(document).ready(function ($) {
	
	$('.dropdown-toggle').click(function(e) {
		// 要素で親メニューリンクとドロップダウンメニュー表示を切り分ける
		if ($(e.target).hasClass('link-menu')) {
			var location = $(this).attr('href');
			window.location.href = location;
			return false;
		}
		return true;
	});

});

これで親メニュー名をクリックした時はリンク、その他の領域をクリックした時は子メニューが表示されるようになります。