17370845950

本文详解如何使用 jquery 精确管理多个下拉菜单的展开/收起状态，并同步控制全局遮罩层（overlay）的显隐，避免因事件触发顺序混乱导致的遮罩层反复切换问题。核心在于利用 `slidetoggle()` 的回调函数检测真实可见状态，而非依赖易错的布尔标志变量。

在构建多 Dropdown 导航栏时，一个常见但棘手的问题是：遮罩层（overlay）的显示/隐藏逻辑与下拉菜单的实际可见状态不同步。你原始代码中使用了全局变量 isDropdownOpen 来“预测”状态，但该变量在 slideToggle() 异步动画执行前就被翻转，且未考虑多个下拉项之间的互斥关闭行为，最终导致点击不同菜单时遮罩层出现“反向闪烁”——即本应保持显示时却意外关闭，或应关闭时反而残留。

✅ 正确解法：以 DOM 实际状态为唯一依据

jQuery 的 slideToggle() 是异步动画方法，其完成时机不可靠，因此绝不能在调用后立即读取 .is(':visible') 或修改状态变量。必须将其逻辑放入动画完成回调中：

$(this).siblings('.hide').slideToggle(400, function() {
  // 动画结束后，检查所有 .hide 元素是否全部隐藏
  if (!$('.dropdown .hide').is(':visible')) {
    $('#cn-overlay').removeClass('on-overlay');
  }
});

此回调确保：只有当当前下拉菜单完成切换、且整个页面中已无任何可见的 .hide 下拉内容区时，才真正隐藏遮罩层。这完全规避了 isDropdownOpen 这类“伪状态”的误导性。

? 完整优化后的初始化脚本

$(document).ready(function() {
  // 处理下拉菜单点击
  $('.dropdown a:not(:only-child)').click(function(e) {
    e.preventDefault(); // 阻止默认跳转（尤其 href="#!" 场景）

    // 始终先显示遮罩层（无论当前是否已开）
    $('#cn-overlay').addClass('on-overlay');

    // 切换当前下拉内容
    $(this).siblings('.hide').slideToggle(400, function() {
      // 动画完成后，检查是否有任意 .hide 可见
      if (!$('.dropdown .hide').is(':visible')) {
        $('#cn-overlay').removeClass('on-overlay');
      }
    });

    // 关闭其他所有下拉菜单（确保单开）
    $('.hide').not($(this).siblings()).slideUp(400);

    return false;
  });

  // 点击外部区域关闭全部
  $(document).on('click', function(e) {
    if (!$(e.target).closest('.dropdown').length) {
      $('.hide').slideUp(400);
      $('#cn-overlay').removeClass('on-overlay');
    }
  });
});

⚠️ 关键注意事项

• 移除冗余状态变量：删除 var isDropdownOpen = false; 及所有对其的读写操作。DOM 状态即真理，无需额外维护。
• 使用 slideUp() 替代 hide()：保证关闭动画与 slideToggle() 一致，视觉更连贯；同时 slideUp() 同样支持回调，便于统一状态判断。
• e.preventDefault() 不可少：防止 触发页面跳转或锚点滚动，干扰用户体验。
• CSS 层级与交互安全：确保 .cn-overlay 的 pointer-events: none; 保留，避免遮罩层拦截点击事件；而 .dropdown 内部元素需有足够 z-index（如你的 z-index: 10）确保覆盖遮罩层。

✅ 最终效果

• 点击任一下拉标题 → 遮罩层立即显示 + 当前菜单滑出；
• 点击另一标题 → 先关闭前一个菜单（带动画），再打开新菜单，遮罩层全程保持显示；
• 所有菜单均收起（含点击外部）→ 遮罩层平滑淡出；
• 无状态抖动、无逻辑反转、无重复触发。

这种基于真实 DOM 可见性（:visible 伪类）的判断方式，是 jQuery 时代处理动态 UI 状态同步最稳健、最可维护的实践模式。