Question

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

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

Answer 1

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

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

JsFiddle示例

<强> toggleClass

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

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

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

Answer 2

试试这个：

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

Answer 3

DEMO

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

试试这种方式

Answer 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

Answer 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>

Answer 6

使用toggleClass（'show'）它将在一次单击时添加该类，并在第二次单击时删除该类。

Answer 7

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

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

7 个答案: