jQuery toggleClassが機能しない

Question

私は、クリックしたときにメニューを表示するボタンを持つWebサイトで作業しています。アクティブなときに色を変更しようとしていますが、ボタンをクリックしたときに背景色を変更していません。ここで私が使用しているコードです。あなたがCSSで自分のコードに入力するよう

$(".services-btn").click(function() { 
 
    $(this).toggleClass("active-btn"); 
 
});

div.services-btn { 
 
    background-color: black; 
 
    color: #f9f9f9; 
 
    cursor: pointer; 
 
    float: left; 
 
    margin: 10px; 
 
    padding: 15px 0; 
 
    text-align: center; 
 
    width: 80px; 
 
} 
 
.active-btn { 
 
    background-color: darkred; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="services-btn mobile">Services</div>

Answer 1

はない.active-btn、なぜならあなたのjQueryでこの

div.services-btn { 
    background-color: black; 
    color: #f9f9f9; 
    cursor: pointer; 
    float: left; 
    margin: 10px; 
    padding: 15px 0; 
    text-align: center; 
    width: 80px; 
} 

div.services-btn.active { 
    background-color: darkred; 
} 

それにアドイン.activeクラスをあなたのCSSを変更します。 jQueryのクラスを.active-btnに変更することもできますし、CSSも変更しないでください。正しく動作します。

Answer 2

.service-btnクラスをアクティブにし、cssを使用してアクティブなクラスのスタイリングを行います。

.services-btn { 
    background-color: black; 
    color: #f9f9f9; 
    cursor: pointer; 
    float: left; 
    margin: 10px; 
    padding: 15px 0; 
    text-align: center; 
    width: 80px; 
} 

.services-btn.active { 
    background-color: darkred; 
} 

jqueryが悪いです。 $(this.toggleClass("active-btn")は、メニューなど、切り替える必要があります。