내 toggleClass 이벤트가 클래스를 추가하지만 이후의 클릭에서 제거되지 않는 이유는 무엇입니까?

Question

나는 display : none의 초기 상태를 가진 드롭 다운 메뉴를 가지고있다. toggleClass 이벤트를 사용하여 display : block 클래스를 추가하므로 버튼을 클릭하면 드롭 다운 메뉴가 나타나고 사라집니다.

toggleClass는 클래스를 추가하기 위해 작동하지만 버튼을 다시 클릭 할 때 클래스를 제거하지 않습니다. 브라우저의 'inspect 요소'도구를 보면 "활성"클래스가 추가되는 것을 볼 수 있지만 후속 클릭에서는 "활성"변수가 div에 남아 있습니다. 클래스는 여전히 클릭으로 무언가를해야한다는 것을 인식하고있는 것처럼 플래시되지만 "활성"클래스는 제거하지 않습니다.

관련 코드는 다음과 같습니다. jquery가 작동하지 않기 때문에 CSS가 필요하지 않지만 참조 용으로 포함되었습니다.

<div class="dropdown"> 
     <a class="dropbtn" id="button-services"><h4 class="button-arrow down-arrow">Service</h4></a> 
     <div class="dropdown-content" id="dropdown-services"> 
     <a href="ourwork-advertising.php">Advertising</a> 
     <a href="ourwork-environmental.php">Environmental</a> 
     <a href="ourwork-interactive.php">Interactive</a> 
     <a href="ourwork-logos.php">Logo</a> 
     <a href="ourwork-packaging.php">Packaging</a> 
     <a href="ourwork-print.php">Print</a> 
     </div> 
    </div> 


.dropdown-content { 
    display: none; } 

.active{ 
    display: block; } 


$('#button-services').click(function() { 
    $('#dropdown-services').toggleClass("active"); 

}); 

Answer 1

아래 참조. 하지만 귀하의 설명에 따르면 click 이벤트 핸들러를 여러 번 첨부한다고 의심됩니다. 어느 시점에서 발사 수는 짝수입니다. 즉, 클래스를 제거하고 추가합니다. click 이벤트 처리기를 연결하는 코드는 어디에 있습니까? 당신이 false를 반환하는 경우

$('#button-services').click(function() { 
 
    $('#dropdown-services').toggleClass("active"); 
 
    return false; 
 
});

.dropdown-content 
 
{ 
 
    display: none; 
 
} 
 

 
.active 
 
{ 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
     <a class="dropbtn" id="button-services"><h4 class="button-arrow down-arrow">Service</h4></a> 
 
     <div class="dropdown-content" id="dropdown-services"> 
 
     <a href="ourwork-advertising.php">Advertising</a> 
 
     <a href="ourwork-environmental.php">Environmental</a> 
 
     <a href="ourwork-interactive.php">Interactive</a> 
 
     <a href="ourwork-logos.php">Logo</a> 
 
     <a href="ourwork-packaging.php">Packaging</a> 
 
     <a href="ourwork-print.php">Print</a> 
 
     </div> 
 
    </div>

Answer 2

후) (. 당신이 후 그것은 나를 $ ('# 버튼을-서비스') 작동 클릭 false를 반환하면 그것은 나를 작동 클릭 (기능을 클릭 { $ ('# 드롭 다운 서비스') toggleClass ("활성"); false를 반환; }});