Bootstrapのdropdown親リンクをクリックする方法

Bootstrapの navbar グローバルメニューで子メニュー dropdown を表示させると親リンクはクリックできなくて困っていました。そんなときの対処法を見つけましたのでご紹介します。

こんな感じ！！マウスオーバーで子メニューの表示。親リンクもちゃんとクリックできます！

まずはマウスオーバーで子メニューを表示させる

Bootstrapのdropdownはクリックすると子メニューが表示される仕様なので、まずはこれをマウスオーバーしたときに子メニューが表示できるように変更します。こちらはCSSで簡単にできました。

CSS

Bootstrap3

@media (min-width: 768px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
  }
}

Bootstrap4

@media (min-width: 768px) {
  nav ul li.dropdown:hover > div.dropdown-menu {
    display: block;    
  }
}

これで768px以上のサイト（主にスマホ以外）の場合、マウスオーバーすることで子メニューが表示されるようになります。

親リンクをクリックできるようにする

JavaScript

$('.dropdown-toggle').click(function() {
  var location = $(this).attr('href');
  window.location.href = location;
  return false;
});

あとはjsにこちらのコードをコピーしてください。
これで親リンクもクリックできるようになります。ご参考までにー

参考サイト

あまり知られていないBootstrapスタイルテクニック、小技16個まとめ

関連記事