Bootstrap 4导航栏下拉菜单hover时实现slideDown动画

我来帮你完善这个实现，让Bootstrap 4的导航栏下拉菜单在桌面端（窗口宽度>769px）鼠标悬停时用slideDown动画平滑展示，同时保留移动端的点击触发逻辑，完整代码如下：

// 定义处理悬停效果的函数
function setupDropdownHover() {
  if ($(window).width() > 769) {
    // 给所有下拉菜单容器绑定hover事件
    $('#nav-menu .dropdown').hover(
      // 鼠标进入时触发下拉显示
      function() {
        $(this).dropdown('show');
      },
      // 鼠标离开时触发下拉隐藏
      function() {
        $(this).dropdown('hide');
      }
    );
  } else {
    // 移动端移除hover事件绑定，恢复默认点击逻辑
    $('#nav-menu .dropdown').off('mouseenter mouseleave');
  }
}

// 页面加载时初始化悬停效果
$(document).ready(function() {
  setupDropdownHover();

  // 监听窗口resize事件，动态调整交互逻辑
  $(window).resize(function() {
    setupDropdownHover();
  });

  // 下拉菜单显示时，用slideDown替代默认动画
  $('#nav-menu .dropdown').on('show.bs.dropdown', function(e) {
    // 停止当前动画，避免队列堆积
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
    // 阻止Bootstrap的默认显示动画（可选，根据需求调整）
    e.preventDefault();
  });

  // 下拉菜单隐藏时，用slideUp替代默认动画
  $('#nav-menu .dropdown').on('hide.bs.dropdown', function(e) {
    // 停止当前动画，避免队列堆积
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300);
    // 阻止Bootstrap的默认隐藏动画（可选，根据需求调整）
    e.preventDefault();
  });
});

关键代码解释： #

• 窗口宽度判断与动态绑定：通过setupDropdownHover函数，只在桌面端启用悬停交互，移动端自动恢复点击触发，同时监听窗口resize事件，确保窗口大小变化时逻辑同步更新。
• hover事件处理：使用hover()的两个回调函数，分别处理鼠标进入（触发dropdown('show')）和离开（触发dropdown('hide')）的场景，比单个toggle逻辑更精准。
• 动画控制：在show.bs.dropdown和hide.bs.dropdown事件中，用stop(true, true)清除之前的动画队列，避免多次触发导致的动画混乱，然后调用slideDown(300)和slideUp(300)实现平滑的滑动效果。
• 阻止默认动画：通过e.preventDefault()可以关闭Bootstrap默认的淡入淡出动画，让滑动效果更纯粹；如果需要保留默认动画叠加，可以移除这行代码。

注意事项： #

• 确保你的导航栏结构符合Bootstrap 4的规范：下拉菜单容器带有.dropdown类，触发按钮带有data-toggle="dropdown"属性。
• 如果只有单个下拉菜单，可以把选择器$('#nav-menu .dropdown')换成你指定的$('#nav-menu #dropdown1')，但建议用类选择器适配多个下拉场景。

内容的提问来源于stack exchange，提问作者spirdonov