JavaScript实现菜单点击+悬停显示/隐藏信息框的需求及代码求助

嗨！作为JavaScript新手，你已经搞定了核心的点击交互逻辑，现在只需要补上鼠标悬停的处理，同时我们可以把代码优化得更简洁易读。下面是完整的解决方案：

一、优化后的JavaScript代码 #

// 将help元素挂载到导航栏指定位置
$('#help').appendTo('.navbar-container .level1');

// 点击菜单项：切换激活状态与信息框显示/隐藏
$('#help a').click(function(e) {
  e.preventDefault();
  $('#help').toggleClass('active');
  $('#help-block').toggle();
});

// 鼠标悬停菜单项：显示信息框并标记激活状态
$('#help').mouseenter(function() {
  $('#help').addClass('active');
  $('#help-block').show();
});

// 鼠标离开菜单项：若未主动关闭，则隐藏信息框并取消激活状态
$('#help').mouseleave(function() {
  if ($('#help').hasClass('active')) {
    $('#help').removeClass('active');
    $('#help-block').hide();
  }
});

// 点击关闭按钮：隐藏信息框并取消激活状态
$('#help-block .help-close').click(function(e) {
  e.preventDefault();
  $('#help-block').hide();
  $('#help').removeClass('active');
});

代码说明： #

• 用toggleClass替代手动的addClass/removeClass，代码更简洁；
• 新增mouseenter事件：鼠标悬停时直接触发信息框显示，同时给菜单项添加激活状态；
• 新增mouseleave事件：离开时先检查激活状态（避免用户主动关闭后，离开仍重复执行隐藏操作），再同步隐藏信息框；
• 关闭按钮逻辑保持不变，确保激活状态与信息框显示状态完全同步。

二、配套基础CSS样式 #

既然你提到需要CSS，这里提供能让功能正常运行的基础样式：

/* 默认隐藏帮助信息框 */
#help-block {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* 菜单项激活状态的视觉反馈（可选） */
#help.active a {
  color: #2563eb;
  font-weight: 500;
}

/* 关闭按钮样式 */
.help-close {
  position: absolute;
  top: 8px;
  right: 12px;
  text-decoration: none;
  color: #6b7280;
  font-size: 18px;
  cursor: pointer;
}

.help-close:hover {
  color: #111827;
}

CSS说明： #

• #help-block设置绝对定位，确保它能悬浮在页面内容上方；
• 激活状态样式给用户明确的视觉反馈，让用户知道当前信息框处于打开状态；
• 关闭按钮定位在信息框右上角，符合大众使用习惯。

这样修改后，你的菜单项就能同时支持点击切换显示/隐藏和鼠标悬停显示、离开隐藏的功能，关闭按钮也能正常工作啦～

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