单击时添加/删除类，Jquery [重复]

【问题标题】：Add/remove class on click, Jquery [duplicate]单击时添加/删除类，Jquery [重复]
【发布时间】：2016-06-15 14:22:00
【问题描述】：

来回单击按钮添加和删除类的最佳方法是什么？

    $('button.hamburger').on('click', function(){
      $(this).addClass('is-active');
    });

    $('button.is-active').on('click', function(){
      $('button.is-active').removeClass('is-active');
    });

它不会删除 .is-active 类。

是否需要 if 语句来检查元素 .hasClass() 是否存在？

【问题讨论】：

标签： jquery button click addclass removeclass

【解决方案1】：

您可以使用 toggleClass() - 干杯。

$("button.hamburger").click(function(){
  $(this).toggleClass("is-active");
});

.is-active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="hamburger">Click me...</button>

【讨论】：

【解决方案2】：

由于活动类是动态添加的，所以需要使用delegate，

$(document).on('click', 'button.is-active', function() {
  $(this).removeClass('is-active');
});

或者你可以简单地使用toggleClass()，

$('button.hamburger').on('click', function() {
  $(this).toggleClass('is-active');
});

【讨论】：