버튼 클릭시 클래스 제거/추가

Question

div에서 하나의 클래스를 제거하고 버튼 클릭시 다른 클래스를 추가 할 수 있기를 원합니다. 그러나 나는 그것을 작동시킬 수 없다.

<div class="hiddennav displaynone"> 
    <ul> 
    <?php wp_nav_menu(array('menu' => 'Main Nav menu')); ?> 
    </ul> 
</div> <!-- end div hiddennav --> 
<div class="fixednav"> 
    <div class="shownav"><a href="#" class="shownavbutton"></a></div> 
    <!-- end div shownav --> 
</div> <!-- end div fixednav --> 

다음은 jQuery의 :

$(document).ready(function(){ 
    $(".shownavbutton").click(function() { 
    $(".hiddennav").removeClass("displaynone").addClass("displayblock"); 
    }); 

내가 여러 번 클릭 할 때 너무 클래스를 전환하고자하는 것이 바람직 것입니다.

Answer 1

는 $(selector).toggleClass(class)보십시오 :

$(document).ready(function(){ 
    $(".shownavbutton").click(function() { 
     $(".hiddennav").toggleClass("displaynone").toggleClass("displayblock"); 
    }); 
}); 

선택적으로, 당신은뿐만 아니라 CSS 방법을 사용할 수 있습니다 (이것은 당신의 displaynone 및 displayblock 클래스를 통해 당신이 달성하고 모든 것을 가정) :

$(".hiddennav").toggle(function() { 
    $(this).css('display','none'); 
}, function() { 
    $(this).css('display','block'); 
}); 

Answer 2

시도를 이

$(".hiddennav").toggleClass("displaynone displayblock");