Jquery函数在按钮悬停时从div中添加/删除类答案

【问题标题】：Jquery function add/remove class from div on button hoverJquery函数在按钮悬停时从div中添加/删除类
【发布时间】：2019-01-29 21:13:22
【问题描述】：

我有这个 jquery 脚本，我在创建时得到了一些帮助，以便在将鼠标悬停在按钮上时向 div 添加/删除“活动”类。

在我整理的 CodePen 下方：

CodePen 链接：https://codepen.io/dustin-keeslar/pen/dapLWM

它运作良好，但我想要改变的是让任何按钮最后悬停在内容上，以保持内容上的“活动”类。这样内容只有在悬停不同的按钮时才会发生变化。

jQuery(document).ready(function() {

  jQuery(".toggle-button").hover(function() {
    var target = jQuery(this).data("target");

    if (jQuery(this).hasClass("expand")) {
      jQuery(this).toggleClass("expand");

      jQuery("#" + target).removeClass("active");
    } else {
      jQuery(".toggle-button").removeClass("expand");
      jQuery(".hidden-content").removeClass("active");

      jQuery(this).toggleClass('expand');

      jQuery("#" + target).toggleClass("active");
    }

  });
});

这会找到一个带有data-target=content1" 的按钮，当它悬停在它上面时，它会将一个“活动”类切换到一个ID为“content1”的div。问题是当你不再悬停时，一切都消失了。我需要最新的悬停按钮来保持内容上的“活动”类。但我还需要在下一个按钮悬停时动态更改内容。

【问题讨论】：

您也愿意接受纯 JavaScript 方法吗？
请包含所有相关代码，以便其他人可以在 Stack Overflow 上重现该问题，而不仅仅是在外部站点上。您可以使用Stack Snippets 在网站上提供可运行的示例。

标签： javascript jquery html css jquery-hover

【解决方案1】：

然后修复它以使用 mouseenter，并将删除代码移动到顶部以删除您的类，然后再将它们添加回已输入的元素。我不明白你在这里想要做什么，但使用 mouseenter 它应该是这样的：

jQuery(document).ready(function() {

jQuery(".toggle-button").mouseenter(function() {
  jQuery(".toggle-button").removeClass("expand");
 //      jQuery(".hidden-content").removeClass("active");
  $(".active").removeClass("active");
  var target = jQuery(this).data("target");
  jQuery("#" + target).addClass("active");

  if (jQuery(this).hasClass("expand")) {
    jQuery(this).removeClass("expand");

    jQuery("#" + target).removeClass("active");
  }

});
});

【讨论】：

【解决方案2】：

您所缺少的只是一个检查，以确保当前项目与目标匹配：

 jQuery(this).attr('id') == target

在这里编写代码：https://codepen.io/anon/pen/VgKOPy

【讨论】：