jquery添加/删除类后返回正常状态

我有一个手风琴，有三个按钮可以打开折叠内容。当我单击每个按钮时，它们都会正确打开，并且使用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>

---

如果看不到您的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');
  }
});

---

您可以简单地使用toggleClass；它将切换“添加/删除”，具体取决于当时元素上的值是否设置为$（this）。请参阅此处的文档：

使用：

---

您给定的代码将加号图标更改为减号图标。你也必须这样做才能把它换回来。更好的方法是使用切换功能

试试这个：

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

---

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

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

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