在同一个按钮或元素上添加和删除类答案

【问题标题】：add and remove class on same button or element在同一个按钮或元素上添加和删除类
【发布时间】：2016-02-04 10:25:52
【问题描述】：

我正在寻找一种在同一个按钮上添加和删除类的方法。到目前为止，这是我正在进行的工作。这个概念是当我单击菜单按钮时，它会显示菜单。当我再次点击菜单按钮时。菜单隐藏

$(document).ready(function(){
    $('button.toggle-portfolio').on('click', function(e){
      $('.portfolio-contact-form-wrap').addClass('show');
    });
});

【问题讨论】：

$('button.toggle-portfolio').on('click', function(e){ $(this).toggleClass('show'); });在同一个按钮上试试这个？
真的不清楚你在问什么......至少，提供相关的 HTML 标记并更好地描述预期的行为
说真的，请使用Google.....
stackoverflow.com/q/19520446/5620297的可能重复

标签： javascript jquery html animation

【解决方案1】：

要实现这一点，您可以像这样使用.toggleClass()：

$(document).ready(function(){
    $('button.toggle-portfolio').on('click', function(e){
      $('.portfolio-contact-form-wrap').toggleClass('show');
    });
});

JsFiddle 示例

toggleClass

根据类的存在或状态参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。

此方法采用一个或多个类名作为其参数。在第一个版本中，如果匹配的元素集中的元素已经具有该类，则将其删除；如果一个元素没有类，则添加它。

有关此功能的更多信息，请查看here 希望这会有所帮助！

【讨论】：

【解决方案2】：

试试这个：

$(document).ready(function(){
  $('button.toggle-portfolio').on('click', function(e){
     $('.portfolio-contact-form-wrap').toggleClass('show');
  });
});

【讨论】：

【解决方案3】：

DEMO

$('.toggle-portfolio').on('click', function(e) {
  $('.portfolio-contact-form-wrap').toggleClass('show');
});

试试这个方法

【讨论】：

OP 不想在单击的元素上切换类 :) 编辑：哎呀看起来确实很令人困惑：I'm looking for a way to add and remove class on the same button 以及关于 OP 发布的代码
@A.Wolff 其实我想澄清一下，但他没有回应，所以我认为点击了按钮，但后来我改变了答案，希望这是 OP 想要的

【解决方案4】：

你应该使用 $(this) 和 toggleClass

$(document).ready(function(){
    $('button.toggle-portfolio').on('click', function(e){
      $(this).toggleClass('show');
    });
});

这会将类添加回被点击的特定元素。

http://api.jquery.com/toggleclass/

http://www.learningjquery.com/2007/08/what-is-this

【讨论】：

【解决方案5】：

您可以将.add() 方法与.toggleClass() 一起使用：

$(document).ready(function() {
  $('button.toggle-portfolio').on('click', function(e) {
    $('.portfolio-contact-form-wrap').add(this).toggleClass('show');
  });
});

.portfolio-contact-form-wrap {
  color:blue;
}
.show {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
  <h1>contact form</h1>
</div>

【讨论】：

【解决方案6】：

使用 toggleClass('show') 它将一键添加类，第二次单击删除类。

【讨论】：

【解决方案7】：

<script>
    $(document).ready(function () {
        $('button.toggle-portfolio').on('click', function (e) {
            $('.portfolio-contact-form-wrap').toggleClass('show');
        });
    });
</script>

【讨论】：

对于nth time :)