Question

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

下面是我写的CodePen：

CodePen链接：here

它运作良好，但是我要更改的是将最后一个按钮悬停在上面，以保持内容上的“活动”类。这样，只有将鼠标悬停在其他按钮上时，内容才会更改。

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应该是这样的：

output$filteredtbl<-DT::renderDataTable({
    if(is.null(GroupingVal)){return()}
    DT::datatable(GroupingVal(),extensions="Responsive",options=list(pageLength=3),class='cell-border strip',selection='single')
  })

Answer 2

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

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

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

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

2 个答案: