jquery添加/删除类后恢复正常状态答案

【问题标题】：Return to normal state after jquery add / remove classjquery添加/删除类后恢复正常状态
【发布时间】：2019-08-23 15:57:25
【问题描述】：

我有一个带有三个按钮的手风琴，可以打开折叠内容。当我单击每个按钮时，它们会正确打开，并且使用 removeClass()、addClass() 将“加号”更改为“减号”，我已经让它工作了。现在我希望它们在再次单击并关闭内容时返回带有“加号”的原始状态。

我尝试了条件 if else 但似乎无法使其正常工作。使用这种方法时它打破了手风琴。

HTML:     
<div class="accordion--one">
                    <button class="btn accordion-btn" type="button" data-toggle="collapse"
                            data-target="#Accordion1" aria-expanded="false"
                            aria-controls="Accordion1"><i class="fas fa-plus"></i>
                    </button>
                    <span class="title-3">test</span>
                    <div class="col collapse-content">
                        <div class="collapse multi-collapse" id="bedAccordion1">
                            <div>
                           <p><b>test</b><br>
                                test</p>
                           <p><b>test</b>><br>
                    test</p>
                           <p><b>test</b><sup>1</sup><br>
                    <br>test</p>
                            </div>
                        </div>
                    </div>
                </div>

jquery:

   $(document).ready(function () {

    $(accordionBtn).click(function(e){
        e.preventDefault();
        $(this).find('.fa-plus').removeClass('fa-plus').addClass('fa-minus');
    });
 });

【问题讨论】：

标签： jquery html css

【解决方案1】：

您提供的代码将加号图标更改为减号图标。你必须做同样的事情才能把它改回来。更好的方法是使用切换功能。

试试这个：

$(".accordion-btn").click(function(e){
   e.preventDefault();
   $(this).find('i').toggleClass('fa-plus fa-minus');
});

【讨论】：

【解决方案2】：

没有看到你的 HTML 结构很难确定，但我想你想要这样的东西：

$(accordionBtn).click(function(e){
  e.preventDefault();
  if ($(this).hasClass('.fa-plus')) {
    $(this).removeClass('fa-plus').addClass('fa-minus');
  } else {
    $(this).removeClass('fa-minus').addClass('fa-plus');
  }
});

【讨论】：

仅供参考，每当您多次使用 $(this) 时，建议将其存储在一个变量中以加快执行时间（正如 Paul Irish 建议的（前 jQuery 标准团队成员）。
这是我最初尝试的，但由于某种原因，加号停留在按钮上，减号只是在加号顶部显示一个框

【解决方案3】：

你可以简单地使用 toggleClass;它将切换添加/删除，具体取决于该值是否在当时设置为 $(this) 的元素上。请参阅此处的文档：https://api.jquery.com/toggleclass/。

用途：

$(accordionBtn).click(function(e) {
    e.preventDefault();
    $(this).toggleClass('fa-plus');
    $(this).toggleClass('fa-minus');
 });

【讨论】：