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