我完全懂你的需求——点击元素后要隐藏下拉菜单，但绝对不能用style.display="none"这种会破坏悬停逻辑的方法，还要保留鼠标再次悬停时自动显示菜单的功能，而且只想用纯JS对吧？

之前你尝试移除类名没解决问题，大概率是没处理好CSS规则的优先级，或者类的控制逻辑不对。下面给你一个靠谱的纯JS方案，核心思路是用CSS类来控制隐藏，同时保证悬停样式的优先级足够覆盖隐藏类：

第一步：HTML结构（参考示例） #

假设你的结构是这样的，你可以根据实际情况调整类名：

<div class="selector">
  选择器元素
  <div class="dropdown">
    <!-- 下拉菜单内容 -->
    <span>菜单项1</span>
    <span>菜单项2</span>
  </div>
</div>

第二步：CSS样式设置 #

这里的关键是让悬停时的显示规则优先级高于隐藏类的规则：

/* 基础样式，可根据需求调整 */
.selector {
  position: relative;
  display: inline-block;
  padding: 8px;
  border: 1px solid #eee;
  cursor: pointer;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 150px;
  background: #fff;
  border: 1px solid #eee;
  display: none; /* 默认隐藏 */
}

/* 核心：悬停时强制显示下拉菜单，不管有没有隐藏类 */
.selector:hover .dropdown {
  display: block;
}

/* 非悬停状态下，有hidden类就隐藏菜单 */
.dropdown.hidden {
  display: none;
}

第三步：纯JS逻辑实现 #

// 获取元素
const selector = document.querySelector('.selector');
const dropdown = selector.querySelector('.dropdown');

// 替换成你自己的现有任务函数
function executeTasks() {
  console.log('执行多项任务：比如发送请求、修改数据...');
  // 这里写你的实际任务代码
}

// 点击事件处理
selector.addEventListener('click', () => {
  // 先执行你的多项任务
  executeTasks();
  
  // 添加hidden类来隐藏下拉菜单
  dropdown.classList.add('hidden');
});

// 如果你需要点击下拉菜单内部的选项也隐藏菜单，可以加这个逻辑
dropdown.querySelectorAll('span').forEach(item => {
  item.addEventListener('click', () => {
    console.log(`点击了${item.textContent}`);
    dropdown.classList.add('hidden');
  });
});

为什么这个方案可行？ #

1. 完全没有用内联样式（style.display="none"），靠CSS类控制隐藏，不会覆盖原本的悬停样式
2. .selector:hover .dropdown的优先级高于.dropdown.hidden，所以鼠标再次悬停时，菜单会自动显示
3. 点击后添加的hidden类只会在非悬停状态下生效，完美满足你的需求

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