如何在鼠标悬停和鼠标退出时制作此自定义引导下拉效果

How to make this customized bootstrap drop down effect on mouseover and mouseout?

本文关键字：鼠标 自定义 悬停 退出      更新时间：2023-09-26

如何在鼠标悬停和鼠标退出时制作此自定义引导下拉列表效果？

 // Add slideup & fadein animation to dropdown
   $('.dropdown').on('show.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
         $(this).css({'margin-top':''});
      });
   });
   // Add slidedown & fadeout animation to dropdown
   $('.dropdown').on('hide.bs.dropdown', function(e){
      var $dropdown = $(this).find('.dropdown-menu');
      var orig_margin_top = parseInt($dropdown.css('margin-top'));
      $dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
         $(this).css({'margin-top':'', display:''});
      });
   });

您可以使用 jQuery 的悬停触发绑定事件：

$('.dropdown').hover(
  function(){ $this.trigger('show.bs.dropdown') },
  function(){ $this.trigger('hide.bs.dropdown') }
);

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
   }, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});

我在引导上找到的。

相关文章：