bootstrap 下拉式選單 Hover特效

這次的專案需要套用bootstrap做成RWD版面

但bootstrap內建的navbar下拉式選單似乎沒有hover的效果，畢竟手機瀏覽是不太需要hover的效果。

但使用電腦瀏覽時，會導致使用者在要一直點選，有點不友善，因此自己參考了codepen裡國外工程師的寫法，讓navbar擁有滑鼠移過去就自動展開下拉式選單的效果。

HTML部分

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Title</a>

</div>

<div class="collapse navbar-collapse navbar-ex1-collapse">

<ul class="nav navbar-nav">

<li><a href="#">Link</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</li>

</ul>

</div>

</nav>

jQuery部分

//選單hover特效

$('ul.nav li.dropdown').hover(function () {

$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(500);

}, function () {

$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(500);

});

這樣就會有hover的特效囉！