bootstrap下拉菜单鼠标悬停弹出

bootstrap下拉菜单默认情况是鼠标点击后出现下拉菜单，对于我们实际做网站时，需要把它改成鼠标悬停弹出下拉菜单。

bootstrap下拉菜单鼠标悬停弹出改造步骤

1. 将自己网站引入bootstrap框架；
2. 在网页的底部，加上以下的JS代码。
   <script>/*下拉菜单*/
   $(document).ready(function(){
   dropdownOpen();
   });
   function dropdownOpen() {
   var $dropdownLi = $('li.dropdown');
   $dropdownLi.mouseover(function() {
   $(this).addClass('open');
   }).mouseout(function() {
   $(this).removeClass('open');
   });
   }</script>
3. 其中li,dropdown 是官网给的事例中的li标签的 class属性。通过以上的代码，我们就可以变成鼠标悬停弹出bootstrap下拉菜单了。

补充：除了上面的代码之外，我们还可以使用下面的JS代码，还可以实现缓冲下拉的效果。

  $(document).ready(function(){

 if($(window).width()>768){



            //鼠标划过就展开子菜单



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



              $(this).find('.dropdown-menu').stop(true, true).slideDown();



            }, function() {



              $(this).find('.dropdown-menu').stop(true, true).slideUp();



            });



      }

});