jQuery多下拉菜单Overlay切换异常问题求助

核心问题是你用单个isDropdownOpen变量判断状态，但多个下拉菜单的状态是独立的，单个变量无法准确反映全局是否有下拉展开。每次点击不同下拉时，变量会被反复切换，导致overlay跟着交替开关。

直接上修复方案：

1. 移除单个状态变量，改用全局统计 #

不要靠单个变量记录状态，而是实时统计页面中处于展开状态的下拉菜单数量，以此控制overlay的显示：

// 给每个下拉触发元素绑定点击事件
$('.dropdown-trigger').on('click', function(e) {
  e.stopPropagation();
  // 切换当前下拉菜单的展开/收起状态
  $(this).siblings('.dropdown-menu').toggleClass('open');
  
  // 统计当前所有展开的下拉数量
  const openDropdownsCount = $('.dropdown-menu.open').length;
  
  // 根据数量控制overlay
  if (openDropdownsCount > 0) {
    $('.overlay').show();
  } else {
    $('.overlay').hide();
  }
});

2. 处理Overlay点击关闭所有下拉 #

如果需要点击overlay关闭所有下拉并隐藏自己，加上这段：

$('.overlay').on('click', function() {
  $('.dropdown-menu.open').removeClass('open');
  $(this).hide();
});

3. 额外优化：点击页面其他区域关闭下拉 #

如果需要点击非下拉区域也关闭所有下拉，可以加个全局点击监听：

$(document).on('click', function(e) {
  // 排除下拉触发元素和下拉菜单本身
  if (!$(e.target).closest('.dropdown-container').length) {
    $('.dropdown-menu.open').removeClass('open');
    $('.overlay').hide();
  }
});

为什么原来的方法不行？ #

你之前用单个变量isDropdownOpen，点击第一个下拉时变量设为true，overlay显示；点击第二个下拉时，代码可能又切换了这个变量为false，导致overlay隐藏，但此时第二个下拉其实是展开的——变量无法同时记录多个下拉的状态，自然会出错。而统计展开的下拉数量，能准确反映全局状态，不管切换哪个下拉，只要还有展开的，overlay就保持显示；全部收起才隐藏。

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