jQuery多个类在单击时切换

Question

Im having an issue using jQuery with multiple classes to toggle. I have this code:

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

what this does is when the user click the .mobile_btn the .main_nav will toggle with the .mobile_active class. Moreover i would like to insert .container and .container_active and i want them to toggle at the same time as the .main_nav with .mobile_active . So basically my code should look like this:

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

I have tried this but it is not working. Any ideas of how to fix this issue?

Thanks

Answer 1

You can write like this :

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

Answer 2

Another idea is use function as argument.

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

(not suggest, just an option)

Answer 3

Did you test your code? Because it works. See the demo. You don't have .container in your HTML.

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>