Bootstrapの navbar
グローバルメニューで子メニュー dropdown
を表示させると親リンクはクリックできなくて困っていました。そんなときの対処法を見つけましたのでご紹介します。
こんな感じ!!マウスオーバーで子メニューの表示。親リンクもちゃんとクリックできます!
まずはマウスオーバーで子メニューを表示させる
Bootstrapのdropdown
はクリックすると子メニューが表示される仕様なので、まずはこれをマウスオーバーしたときに子メニューが表示できるように変更します。こちらはCSSで簡単にできました。
CSS
@media (min-width: 768px) { ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } }
これで768px以上のサイト(主にスマホ以外)の場合、マウスオーバーすることで子メニューが表示されるようになります。
親リンクをクリックできるようにする
JavaScript
$('.dropdown-toggle').click(function() { var location = $(this).attr('href'); window.location.href = location; return false; });
あとはjsにこちらのコードをコピーしてください。
これで親リンクもクリックできるようになります。ご参考までにー