Bootstrap 下拉菜单改为鼠标悬停显示

Bootstrap提供的下拉菜单，是鼠标点击后出现，用户体验不太好。自改为鼠标悬停显示方式。修改两处即可，简述如下。

修改

1. css增加鼠标悬停（即：hover）显示属性；

   .nav > li:hover .dropdown-menu{
   display: block;
   }

2. js关闭鼠标点击功能（若不关闭，会出现点击后移出鼠标，下拉菜单不隐藏Bug.）

   <script>
       $(document).off( ‘click.bs.dropdown.data-api‘ );
   </script>

备注

自己的代码不贴了。附上Bootstrap二级下拉菜单的代码，使用时添加修改的两处即可。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Bootstrap 下拉菜单改为鼠标悬停显示

原文：https://blog.51cto.com/weiyuqingcheng/2547359