Bootstrap dorpdown hover

Bootstrap下拉菜單默認須要經過點擊，才能夠打開，在管理系統的開發過程當中，使用懸停代替點擊能減小一步操做，更人性化。

1、純css樣式控制。

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;     // remove the gap so it doesn't close
}

　　優勢：實現簡單，無需藉助js。

　　缺點：觸發按鈕跟下拉菜單之間不能有間隙，不然一失焦下拉菜單就會消失。

2、插件實現。

　　bootstrap-hover-dropdown 插件能夠實現此功能。　　

<!-- script order matters! -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-hover-dropdown.min.js"></script>


<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">菜單一</a></li>
    </ul>
</li>

　　優勢：使用簡單。

　　缺點：該插件存在不肯定性BUG，且自從2015年末至今一直沒有維護更新。
　　　　　（親歷：多行表格中，每行都有dropdown按鈕，hover時有時顯示不正常）。

3、css+hover+timeout實現。

　　基於方案一，經過樣式控制是否顯示，經過hover事件控制是否添加樣式，經過timeout解決異常失焦問題。

.dropdown.hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

$('[data-toggle="dropdown"]').hover(function(){
    var $parents = $(this).parents('.dropdown');
    window.dropDownTimer&&clearTimeout(window.dropDownTimer);
    $('.dropdown').removeClass('hover');
    $parents.addClass('hover');
},function(){
    var $parents = $(this).parents('.dropdown');
    window.dropDownTimer = setTimeout(function(){
        $parents.removeClass('hover');
    },500)
})