Bootstrap dorpdown hover

Bootstrap下拉菜单默认需要通过点击，才可以打开，在管理系统的开发过程中，使用悬停代替点击能减少一步操作，更人性化。

一、纯css样式控制。

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

　　优点：实现简单，无需借助js。

　　缺点：触发按钮跟下拉菜单之间不能有间隙，否则一失焦下拉菜单就会消失。

二、插件实现。

　　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时有时显示不正常）。

三、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)
})

　　

转载于:https://www.cnblogs.com/newh5/p/9049569.html