Javascript 如何在加号和减号之间切换手风琴？

我有6个家长手风琴链接，都有孩子。在左边，它们包含字体加号

我想在单击时将加号切换为减号

目前，我的plusSign变量只抓取第一个加号，以表明它可以工作（使用

constplusSign=document.querySelector（'.fa plus'）；

）

对于第一个链接非常有用。但是，我希望这会影响所有实例

我尝试使用querySelectorAll（

constplussign=document.querySelectorAll（'.faplus'）；

），但根本不起作用

代码位于上面的链接中，但下面是代码，以防万一：

HTML:

JS:

constplussign=document.querySelector（'.faplus'）；
设acc=document.getElementsByClassName（“accordion”）；
让我；
对于（i=0；i

您需要使用传递给事件侦听器回调函数的

事件

对象

event.target

将为您提供单击的

a

标记，

event.target.firstElementChild

将为您提供单击的

a

标记旁边的图标

let acc=document.getElementsByClassName（“accordion”）；
让我；
对于（i=0；i

.panel{
显示：无；
}

产品页













































AOS.init（）；

检查此项。稍微编辑一下你的代码

constplussign=document.querySelector（'.faplus'）；
设acc=document.getElementsByClassName（“accordion”）；
让我；
让TogleAccordion=函数（）{
/*在隐藏和显示活动面板之间切换*/
让panel=this.nextElementSibling；
if（panel.classList.contains（“折叠”））{
警报（“开放式acc”）；
panel.classList.remove（“折叠”）
plusSign.classList.remove（'fa-plus'）；
plusSign.classList.add（'fa-减号'）；
}否则{
警报（“关闭acc”）；
panel.classList.add（“折叠”）
plusSign.classList.remove（'fa-减号'）；
plusSign.classList.add（'fa-plus'）；
}
}
对于（i=0；i

.panel{
显示：块；
}
.面板倒塌{
显示：无；
}

管制及；自动化











  <!--Quick Link Box-->
  <section class="quick-link-box">
    <div class="columns is-desktop">
      <div class="column">
        <div class="card quick-link-card quick-link-card-mobile" tabindex="0">
          <ul>
            <li>
              <a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Control &amp; Automation</a>
              <div class="panel">
                <ul class="child">
                  <li><a href="#">Molded Machine Tool Industrial Control Transformer</a></li>
                  <li><a href="#">Industrial Open Core & Coil Control Transformer</a></li>
                  <li><a href="#">General Purpose Enclosed Transformer</a></li>
                  <li><a href="#">Encapsulated Control Transformer</a></li>
                  <li><a href="#">Energy Efficient Drive Isolation Transformer (Gen. 3)</a></li>
                  <li><a href="#">Energy Efficient Drive Isolation Transformer (Gen. 2)</a></li>
                  <li><a href="#">Drive Isolation Transformer (Gen. 1)</a></li>
                  <li><a href="#">Reactors</a></li>
                  <li><a href="#">DV/DT Filter</a></li>
                  <li><a href="#">Motor Starting Autotransformers</a></li>
                </ul>
              </div>
            </li>
            <li>
              <a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Medium Voltage Distribution</a>
              <div class="panel">
                <ul class="child">
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li>
              <a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Low Voltage Distribution</a>
              <div class="panel">
                <ul class="child">
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li>
              <a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Encapsulated &amp; Specialty</a>
              <div class="panel">
                <ul class="child">
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li>
              <a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Custom Products</a>
              <div class="panel">
                <ul class="child">
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
            <li>
              <a class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> OEM Products</a>
              <div class="panel">
                <ul class="child">
                  <li><a href="#">Link #1</a></li>
                  <li><a href="#">Link #2</a></li>
                  <li><a href="#">Link #3</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

const plusSign = document.querySelector('.fa-plus');

let acc = document.getElementsByClassName("accordion");
let i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {

  /* Toggle between hiding and showing the active panel */
  let panel = this.nextElementSibling;
  if (panel.style.display === "block") {
    panel.style.display = "none";
    plusSign.classList.remove('fa-minus');
    plusSign.classList.add('fa-plus');
  } else {
    panel.style.display = "block";
    plusSign.classList.remove('fa-plus');
    plusSign.classList.add('fa-minus');
  }
});
}