鼠标悬停按钮显示子菜单并点击保持，mouseover时仅显示对应section

你的代码里toggleDivs函数的逻辑是对的（先清空所有菜单的显示状态，再激活目标菜单），但因为事件绑定方式错误、缺少点击逻辑等问题，导致效果不符合预期。以下是修正后的完整实现：

假设你的HTML结构如下（如果已有可直接复用） #

<button id="btn1">按钮1</button>
<section id="sect1" class="hidden">子菜单1内容</section>

<button id="btn2">按钮2</button>
<section id="sect2" class="hidden">子菜单2内容</section>

<button id="btn3">按钮3</button>
<section id="sect3" class="hidden">子菜单3内容</section>

修正后的JavaScript代码 #

// 批量获取按钮和菜单元素，避免重复DOM查询
const buttons = document.querySelectorAll('[id^="btn"]');
const sections = document.querySelectorAll('[id^="sect"]');

// 记录当前被点击激活的按钮ID，用于控制点击后保持显示的状态
let activeBtnId = null;

// 绑定鼠标悬停事件
buttons.forEach(btn => {
  btn.addEventListener('mouseover', () => {
    // 只有没有被点击激活的按钮时，才切换菜单显示
    if (!activeBtnId) {
      const targetSectionId = btn.id.replace('btn', 'sect');
      toggleDivs(targetSectionId);
    }
  });
});

// 绑定点击事件，实现点击后保持菜单显示
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const targetSectionId = btn.id.replace('btn', 'sect');
    // 切换激活状态：如果当前按钮已激活则取消，否则设置为激活
    if (activeBtnId === btn.id) {
      activeBtnId = null;
      toggleDivs(null); // 取消激活时隐藏所有菜单
    } else {
      activeBtnId = btn.id;
      toggleDivs(targetSectionId);
    }
  });
});

// 可选：处理鼠标离开菜单区域的情况（未点击激活时，离开菜单自动隐藏）
sections.forEach(section => {
  section.addEventListener('mouseleave', () => {
    if (!activeBtnId) {
      section.classList.remove('shown');
    }
  });
});

// 统一控制菜单显示/隐藏的函数
function toggleDivs(targetId) {
  // 先隐藏所有菜单
  sections.forEach(sect => {
    sect.classList.remove('shown');
  });
  // 如果有目标ID，显示对应菜单
  if (targetId) {
    document.getElementById(targetId).classList.add('shown');
  }
}

CSS代码（保留原有逻辑，无需修改） #

.elementor-editor-active .hidden{
    display:block;
}
.hidden{
    display:none;
}
.shown{
    display: block !important;
}

关键逻辑说明 #

1. 事件绑定修正：用addEventListener绑定mouseover事件，这是标准的事件绑定方式，避免直接赋值覆盖其他事件
2. 激活状态管理：通过activeBtnId变量记录点击激活的按钮，鼠标悬停时仅在无激活按钮时切换菜单，保证点击后菜单持续显示
3. 批量元素处理：用querySelectorAll批量获取按钮和菜单，减少重复代码，后续新增按钮/菜单无需修改JS逻辑
4. 可选的菜单离开处理：添加mouseleave事件，让未点击激活的菜单在鼠标离开后自动隐藏，提升交互体验

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