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>

jQuery多个类在点击时切换

3 个答案: