jQuery 多个类在点击时切换

Question

我在使用带有多个类的 jQuery 进行切换时遇到问题。 我有这个代码：

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

当用户点击 .mobile_btn 时，.main_nav 将与 .mobile_active 类切换。此外，我想插入 .container 和 .container_active 并且我希望它们与 .main_nav 同时切换 .mobile_active。所以基本上我的代码应该是这样的：

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

我已经尝试过了，但它不起作用。有关如何解决此问题的任何想法？

谢谢

Answer 1

你可以这样写：

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

Answer 2

另一个想法是使用函数作为参数。

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

（不建议，只是一种选择）

Answer 3

您是否测试过您的代码？因为它有效。请参阅演示。 您的 HTML 中没有 .container。

片段

$(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>