Shopware 6.5.4.1 JavaScript移除类问题：点击外部无法隐藏下拉菜单

你的代码里有几个关键问题导致show类没被正确移除，以下是修正方案和问题分析：

问题点分析 #

• 赋值运算符误用：if (event.target = dropdownElement)里用了赋值=，不是判断相等的===，而且逻辑完全颠倒——你现在是把元素赋值给event.target，导致条件永远为真，但实际要判断的是点击的是下拉菜单外部。
• 元素获取方式错误：getElementsByClassName返回的是HTMLCollection集合，不是单个DOM元素，直接调用classList会报错，必须取集合里的元素（比如[0]）。
• 初始选择器冗余：选择器里带了show类，一旦这个类被移除，你获取的元素集合就会失效，无法再操作。
• 点击外部判断逻辑不全：只判断event.target是否等于下拉元素本身，会忽略点击下拉菜单子元素的情况（此时应该不关闭菜单）。

修正后的代码 #

// 用querySelector获取单个下拉元素，去掉选择器中的show类
const dropdownElement = document.querySelector(".filter-multi-select-dropdown.filter-panel-item-dropdown.dropdown-menu");

document.addEventListener('click', (event) => {
  // 判断点击区域不在下拉菜单及其子元素范围内
  if (!dropdownElement.contains(event.target)) {
    dropdownElement.classList.remove("show");
    console.log("Clicked Outside");
  }
});

关键修改说明 #

• 替换getElementsByClassName为querySelector：直接返回单个匹配的DOM元素，避免集合操作的繁琐。
• 用contains方法判断点击范围：确保只有点击下拉菜单外部（包括页面空白处、其他元素）时才执行关闭逻辑，点击菜单内部子元素不会触发。
• 移除选择器中的show类：保证即使类被移除，依然能正确获取到目标元素。
• 使用const代替var：符合现代JavaScript变量声明规范，避免不必要的变量提升问题。

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