下拉导航交互优化：切换下拉框时黑色背景需持续显示并同步触发

看起来你遇到的核心问题是切换下拉菜单时黑色背景会短暂消失，而且背景显示滞后于下拉框展开——这是因为原代码把背景的显示/隐藏绑定在了单个下拉菜单的动画回调里，切换时会先收起旧菜单→移除背景→再展开新菜单→添加背景，中间就出现了空档。下面是针对性的修复方案：

问题根源拆解 #

1. 原逻辑中，切换下拉时会先执行旧菜单的slideUp，在回调里移除背景，直接导致切换过程中背景消失
2. 背景的添加要等到新菜单slideDown完成后才执行，所以会滞后于下拉框的展开
3. 没有阻止a标签的默认跳转行为，点击时可能会触发页面滚动干扰体验

修改后的完整代码 #

JavaScript 部分 #

$(document).ready(function() {
  $(".click").on("click", function(e) {
    e.preventDefault(); // 阻止a标签默认跳转，避免页面滚动
    var menu = $(this);
    toggleDropDown(menu);
  });

  $(document).on('mouseup',function(e) {
    var container = $("nav .top-bar-section ul");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      // 收起所有下拉菜单并移除背景
      $('a.active').parent().find('.showup').stop(true, true).slideUp(500);
      $('a.active').removeClass('active');
      $(".main-container").removeClass("black-bg");
    }
  });
});

function toggleDropDown(menu) {
  var isCurrentActive = menu.hasClass('active');
  var hasOtherActive = $('a.active').length > 0;

  // 如果当前菜单已经激活，收起它并检查是否需要移除背景
  if (isCurrentActive) {
    menu.parent().find('.showup').stop(true, true).slideUp(500);
    menu.removeClass('active');
    // 只有当没有其他激活菜单时，才移除背景
    if (!$('a.active').length) {
      $(".main-container").removeClass("black-bg");
    }
    return;
  }

  // 有其他激活菜单时，先收起它，但不立即移除背景
  if (hasOtherActive) {
    $('a.active').parent().find('.showup').stop(true, true).slideUp(500);
    $('a.active').removeClass('active');
  }

  // 激活当前菜单并展开下拉框，同时立即显示背景
  menu.addClass('active');
  menu.parent().find('.showup').stop(true, true).slideDown(500);
  $(".main-container").addClass("black-bg");
}

CSS & HTML 部分（无需修改，沿用你原有的代码即可） #

关键优化点说明 #

1. 背景状态实时控制：不再依赖下拉动画的回调来切换背景，而是根据当前是否有激活的下拉菜单直接判断——切换菜单时，旧菜单收起的同时新菜单展开，始终有激活项，所以背景全程保持可见
2. 动画并行执行：旧菜单收起和新菜单展开的动画可以同步进行，不需要等旧菜单完全收起才展开新的，解决了切换时的卡顿感
3. 阻止默认行为：添加e.preventDefault()避免点击导航时页面意外滚动

现在测试效果：

• 点击已展开的菜单：菜单收起，背景同步消失
• 切换不同菜单：旧菜单收起的同时新菜单展开，黑色背景全程可见，没有闪烁
• 点击页面其他区域：所有菜单收起，背景同步消失

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