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

2016年7月15日2023年9月26日

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

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

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

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

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

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

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

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

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

あまり知られていないBootstrapスタイルテクニック、小技16個まとめ
http://photoshopvip.net/69687