Javascript 单击jQuery多个类切换

我在使用jQuery时遇到了一个问题，需要切换多个类。 我有以下代码：

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

当用户单击.mobile\u btn时，.main\u nav将与.mobile\u active类切换。此外，我想插入.container和.container\u active，我希望它们与.main\u nav同时切换.mobile\u active。所以基本上我的代码应该是这样的：

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

我试过这个，但不起作用。有没有办法解决这个问题

---

谢谢你可以这样写：

$（函数（）{
$（.mobile_btn”）。在（“单击”，函数（）上{
$（“.main_nav”）.toggleClass（“移动_活动”）；
$（“.container”）.toggleClass（“container_active”）；
}); 
});另一个想法是使用函数作为参数

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

（不是建议，只是一个选项）
您测试了代码吗？因为它有效。请看演示。
HTML中没有
.container

片段


$（函数（）{
$（.mobile_btn”）。在（“单击”，函数（）上{
$（“.main\u nav，.container”）.toggleClass（“移动的\u活动的容器\u活动的”）；
}); 
});
.container{轮廓：3px绿色虚线；宽度：300px；高度：90px；}
.main_nav{轮廓：2px纯蓝色；宽度：100%；高度：30px；}
.mobile_btn{宽度：70px；线宽：1.5；光标：指针；}
.main_nav.mobile_active{轮廓：3px纯红色；背景：rgba（255,0,0,6）；颜色：#CCC；}
.container.container_active{outline:5px solid#0f0；背景：rgba（0255,0,3）；颜色：#888；}
.main_nav:after{content:'MOBILE INACTIVE'；}
.main_nav.mobile_active:在{content:'mobile active'；}
.container:在{content:'container EMPTY'；}之后
.container.container_活动：在{content:'container FULL'；}之后

转换
您需要有两种不同的语句您的jQuery很好。HTML中没有
.container
。看看我的答案。我也试过Sadikali，但仍然不起作用。你能把你的html发给我吗？X
你能显示代码吗@Sadikali Danntreliya的回答也是正确的。您的“点击”事件可能未触发？没问题。您不需要更改jQuery，事实上我也是这样编写的。它是流线型的。