javascript - 首个网站，需要某些点击功能的帮助

Question

我在这个选项上有两个选项卡。我已经为这两个选项卡创建了 mouseover 和 mouseleave。当您突出显示一个或另一个时，它们共享一种背景颜色。

但是，现在我正在创建一个点击功能。当您单击其中一个选项卡时，我希望它保持该背景颜色，即使用户第二次突出显示，这次也不会改变颜色。我想这样做的原因是显示哪个选项卡处于事件状态，因为每个选项卡都有自己单独的内容，这些内容将出现在同一个 div 中。

HTML代码:

<div class="meal-details">
  <h4>Lobster & Summer Vegetables with Spicy Herbed Butter</h4>
  <h5 class="optiontabs meal-description">DESCRIPTION</h5>
  <h5 class="optiontabs nutrition-description">NUTRITIONAL INFO</h5>
  <div class="nutrition-breakdown">
    <p>This is the nutrition info bro</p>
  </div>
  <div class="meal-breakdown">
    <p>The meal breakdown and descrition.</p>
  </div>
</div>

JQuery:

$(document).ready(function() {

  $(".optiontabs").mouseover(function() {
    $(this).css("background-color", "#3e597c");

  });

  $(".optiontabs").mouseleave(function() {
    $(this).css("background-color", "#141C25");

  });

  $(".nutrition-description").click(function() {
    $(this).css("background-color", "#3e597c");
    $(this).nextAll(".nutrition-breakdown").css("display", "initial");
    $(this).nextAll(".meal-breakdown").css("display", "none");
  });

});

我的问题是，要实现我上面提到的目标，最好使用什么方法。我已经要求 Jquery 更改事件选项卡的背景颜色，但它没有这样做。我究竟做错了什么？

提前感谢您的帮助!

Answer 1

一旦你点击一个元素，你就必须解绑 mouseover 和 mouseleave。您可以使用 $('element').off('event') 语法来做到这一点。请看下面的代码:

$(document).ready(function() {

    var countClick = 0;

    if(countClick==0) {
        $(".optiontabs").mouseover(function() {
        $(this).css("background-color", "#3e597c");
      });

      $(".optiontabs").mouseleave(function() {
        $(this).css("background-color", "#141C25");
      });
    }

    $(".nutrition-description").click(function() {
        $(".optiontabs").off("mouseleave");
        $(".optiontabs").off("mouseover");
        countClick++;
        $(this).css("background-color", "#3e597c");
        $(this).nextAll(".nutrition-breakdown").css("display", "initial");
        $(this).nextAll(".meal-breakdown").css("display", "none");
    });

});