text Bootstrap 3悬停下拉菜单

Posted 2021-05-02

1. JS:

$(document).ready(function(){
  $('ul.nav li.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    $(this).addClass('hover');
  }, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    $(this).removeClass('hover');
  });  
});

- OR -

CSS:

.dropdown-menu{
  display: block;
  opacity: 0;
  @include transition(opacity .3s ease);
}
.dropdown:hover .dropdown-menu {
  // display: block;
  opacity: 1;
}


2. Comment out data-toggle="dropdown" in HTML