实现按钮点击后悬停状态保持至菜单关闭（类切换）

这个问题的核心是CSS的:hover伪类仅在鼠标实际悬停时生效，点击后鼠标移开就会失去状态，所以我们需要用自定义类模拟悬停状态，通过JS控制这个类的生命周期，和菜单的显示/关闭绑定。

步骤1：添加模拟悬停的CSS类 #

首先在你的样式里新增一个和按钮:hover效果完全一致的类，这样我们就能通过添加/移除这个类来实现持续的悬停视觉效果：

/* 保留原hover样式，新增active-hover类同步效果 */
.tablabel:hover, .tablabel.active-hover {
  /* 替换成你原本的hover样式，比如： */
  background-color: #e8f4fa;
  color: #165DFF;
  border-color: #165DFF;
}

步骤2：修改JS逻辑绑定类的状态 #

接下来调整JavaScript代码，让按钮的active-hover类和菜单的active状态联动：

// 点击按钮切换菜单
$('.tablabel').click(function(event){
  // 先重置其他按钮和菜单的状态
  $('.tablabel').not(this).removeClass("active-hover").next().removeClass("active");
  
  const $currentBtn = $(this);
  const $currentMenu = $currentBtn.next();
  const isMenuActive = $currentMenu.hasClass("active");

  if (isMenuActive) {
    // 当前菜单是打开状态，点击后关闭，同时移除按钮的悬停类
    $currentBtn.removeClass("active-hover");
  } else {
    // 当前菜单是关闭状态，点击后打开，给按钮加上悬停类
    $currentBtn.addClass("active-hover");
  }
  
  $currentMenu.toggleClass("active");
});

// 点击菜单内部关闭
$(".dpd").click(function(e){
  // 关闭菜单时，找到对应的按钮并移除悬停类
  $(this).prev(".tablabel").removeClass("active-hover");
  $(this).toggleClass("active");
});

// 补充：点击页面其他区域关闭所有菜单（你提到的未实现部分）
$(document).click(function(e){
  const $target = $(e.target);
  // 如果点击的不是按钮也不是菜单内部
  if (!$target.closest('.tablabel').length && !$target.closest('.dpd').length) {
    $('.dpd').removeClass("active");
    $('.tablabel').removeClass("active-hover");
  }
});

逻辑说明 #

• 点击按钮时，先判断当前菜单状态：打开菜单则给按钮加悬停类，关闭菜单则移除该类。
• 点击菜单内部关闭时，同步移除对应按钮的悬停类。
• 新增点击页面其他区域关闭所有菜单的逻辑，同时移除所有按钮的悬停类，完善交互体验。

这样就能实现点击按钮后，按钮保持悬停状态直到菜单关闭的需求啦！

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