jQuery toggleClass не работает

Question

Я работаю над веб-сайтом, на котором есть кнопка, показывающая меню при нажатии. Я пытаюсь заставить его менять цвет при активном, но toggleClass не меняет цвет фона при нажатии кнопки. Вот код, который я использую.

$(".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

Изменения CSS для этого

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; 
} 

Это потому, что в вашем JQuery вашего класса добавить .active, не .active-btn, как вы набираете на свой код на 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 is worng. $(this.toggleClass("active-btn") должно быть меню или что-то еще, что вы хотите переключить.