导航栏下拉菜单交互逻辑优化需求咨询

嘿，我来帮你搞定这三个导航栏交互问题！咱们一步步拆解，附上具体的代码实现思路和示例：

1. 点击已激活导航项关闭下拉并移除对应类 #

之前只有点击外部才会触发关闭，现在给已激活的导航项添加点击关闭逻辑就行。我们可以在导航项的点击事件里判断，如果当前项已经有.active类，就执行和外部点击一样的关闭操作：移除.black-bg和.active，同时收起下拉菜单。

2. 等待第一个下拉完全关闭后再打开第二个 #

核心是用一个状态变量跟踪当前是否有下拉动画在执行，避免两个动画同步进行。比如定义isMenuAnimating，在动画开始时设为true，动画结束后设为false。当用户点击第二个导航项时，如果isMenuAnimating为true，就先等待当前动画结束，再执行新的打开操作。

3. 同一导航项关闭时点击可切换开闭状态 #

这里需要判断点击的导航项是否是当前已激活的：如果是已激活且没有动画在执行，就关闭下拉；如果未激活，就按正常流程打开。这样就能实现同一项的开闭切换。

完整代码示例（基于jQuery） #

// 状态变量：跟踪是否有下拉动画在进行，记录当前激活的导航项
let isMenuAnimating = false;
let activeNavItem = null;

// 导航项点击事件处理
$('.nav-item').on('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到文档的外部点击逻辑
  const $currentItem = $(this);
  const isCurrentActive = $currentItem.hasClass('active');
  const $mainContainer = $('.main-container');

  // 处理需求3：同一导航项的开闭切换
  if (isCurrentActive) {
    // 如果当前项已激活且无动画，执行关闭
    if (!isMenuAnimating) {
      closeDropdown();
    }
  } else {
    // 处理需求2：等待第一个下拉关闭后再打开第二个
    if (isMenuAnimating) {
      // 监听当前下拉动画结束，再打开新的
      $('.dropdown-menu').one('transitionend', function() {
        openDropdown($currentItem);
      });
    } else {
      // 无动画直接打开
      openDropdown($currentItem);
    }
  }
});

// 通用关闭下拉函数
function closeDropdown() {
  isMenuAnimating = true;
  $('.nav-item.active').removeClass('active');
  $('.main-container').removeClass('black-bg');
  // 用slideUp模拟关闭动画，时长根据你的实际CSS动画调整
  $('.dropdown-menu').slideUp(300, function() {
    isMenuAnimating = false;
    activeNavItem = null;
  });
}

// 通用打开下拉函数
function openDropdown($item) {
  // 如果有其他激活的导航项，先关闭它
  if (activeNavItem && activeNavItem !== $item[0]) {
    closeDropdown();
    // 等待关闭动画结束后再打开新的（时长和slideUp一致）
    setTimeout(() => {
      isMenuAnimating = true;
      $item.addClass('active');
      $mainContainer.addClass('black-bg');
      $item.find('.dropdown-menu').slideDown(300, function() {
        isMenuAnimating = false;
        activeNavItem = $item[0];
      });
    }, 300);
  } else {
    // 直接打开当前项的下拉
    isMenuAnimating = true;
    $item.addClass('active');
    $mainContainer.addClass('black-bg');
    $item.find('.dropdown-menu').slideDown(300, function() {
      isMenuAnimating = false;
      activeNavItem = $item[0];
    });
  }
}

// 保留原有的外部点击关闭逻辑
$(document).on('click', function(e) {
  // 点击区域不在导航项内且无动画时，关闭下拉
  if (!$(e.target).closest('.nav-item').length && !isMenuAnimating) {
    closeDropdown();
  }
});

关键细节说明 #

• 动画时长：示例里用了300ms，你可以根据自己的CSS过渡/动画时长调整slideUp/slideDown和setTimeout的时间。
• 事件阻止冒泡：在导航项点击事件里加e.stopPropagation()，避免触发文档的外部点击关闭逻辑。
• 状态变量：isMenuAnimating确保同一时间只有一个动画在执行，解决了两个下拉动画同步的问题。

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