jQuery函数在按钮悬停时从div添加/删除类

Question

我有这个jquery脚本，在创建时得到了一些帮助，以便将鼠标悬停在div上时将“活动”类添加到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。问题在于，当您不再悬停时，一切都消失了。我需要使用最新的悬停按钮来保持内容上的“活动”类，但是当下一个按钮悬停时，我还需要动态更改内容。

Answer 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");
  }

});
}); 

Answer 2

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

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

此处的Codepen： https ：//codepen.io/anon/pen/VgKOPy