jQuery toggleClass가 작동하지 않습니다.

Question

클릭하면 메뉴가 표시되는 버튼이있는 웹 사이트에서 작업하고 있습니다. 활성화 될 때 색상을 변경하려고 시도하지만 버튼을 클릭 할 때 배경색을 변경하지 않습니다. 여기에 제가 사용하고있는 코드가 있습니다. 당신이 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")은 토글하려는 메뉴 또는 다른 항목이어야합니다.