jQuery mehrere Klassen toggle on click

Question

Ich habe ein Problem mit jQuery mit mehreren Klassen zum Umschalten. Ich habe diesen Code:

$(function(){ 
    $(".mobile_btn").on("click", function(){ 
     $(".main_nav").toggleClass("mobile_active"); 
    }); 
}); 

was das bedeutet ist, wenn der Benutzer die .mobile_btn die .main_navklicken, wird mit der .mobile_active Klasse wechseln. Außerdem möchte ich .Behälter und .container_active einzufügen, und ich möchte, dass sie als .main_nav mit .mobile_active zugleich wechseln. Also im Grunde mein Code sollte so aussehen:

$(function(){ 
    $(".mobile_btn").on("click", function(){ 
     $(".main_nav, .container").toggleClass("mobile_active container_active"); 
    }); 
}); 

Ich habe dies versucht, aber es funktioniert nicht. Irgendwelche Ideen, wie Sie dieses Problem beheben können?

Dank

Answer 1

Sie so schreiben können:

$(function(){ 
 
    $(".mobile_btn").on("click", function(){ 
 
     $(".main_nav").toggleClass("mobile_active"); 
 
     $(".container").toggleClass("container_active"); 
 
    }); 
 
});

Answer 2

Eine weitere Idee ist die Verwendung Funktion als Argument.

$(function() { 
    $(".mobile_btn").on("click", function() { 
    $(".main_nav, .container").toggleClass(function() { 
     return $(this).hasClass('main_nav') ? 'mobile_active' : 'container_active'; 
    }); 
    }); 
}); 

(nicht den Eindruck erwecken, nur eine Option)

Answer 3

Haben Sie Ihren Code testen? Weil es funktioniert. Siehe die Demo. Sie haben .container in Ihrem HTML nicht.

Snippet

$(function(){ 
 
    $(".mobile_btn").on("click", function(){ 
 
     $(".main_nav, .container").toggleClass("mobile_active container_active"); 
 
    }); 
 
});

.container {outline: 3px dashed green; width: 300px; height: 90px;} 
 
.main_nav {outline: 2px solid blue; width: 100%; height: 30px; } 
 
.mobile_btn { width: 70px; line-height: 1.5; cursor: pointer; } 
 
.main_nav.mobile_active { outline: 3px solid red; background: rgba(255,0,0,.6); color: #CCC; } 
 
.container.container_active{outline: 5px solid #0f0; background: rgba(0,255,0,.3); color: #888; } 
 
.main_nav:after { content:'MOBILE INACTIVE';} 
 
.main_nav.mobile_active:after { content:'MOBILE ACTIVE';} 
 
.container:after { content:'CONTAINER EMPTY';} 
 
.container.container_active:after { content:'CONTAINER FULL';}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<section class="container"> 
 
    <nav class="main_nav"> 
 
    <button class="mobile_btn">SWITCH</button> 
 
    </nav> 
 
    </section>