最初のウェブサイト、特定のクリック機能のサポートが必要

Question

このオプションには2つのタブがあります。私はすでにこれらの2つのタブのマウスオーバーとマウスリーブを作成しました。どちらか一方を強調表示すると、背景色を共有します。

ただし、今はクリック機能を作成しています。これらのタブの1つをクリックすると、その背景色を維持したいと思います。ユーザーが2回目にハイライトしても、今回は色が変わらないでしょう。なぜなら、これは、どのタブがアクティブなのかを表示するためです。各タブには、同じ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

要素を一度クリックすると、マウスオーバーとマウスの離脱を解除する必要があります。 $('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"); 
    }); 

});