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

时间：2019-02-20 13:53:09

标签： javascript for-loop if-statement accordion

Codepen link.

我有6个父级手风琴链接，都带孩子。在左侧，它们包含超赞的字体加号。

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

当前，我的plusSign变量仅捕获第一个加号以表明其有效（使用const plusSign = document.querySelector('.fa-plus');）。

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

我尝试使用querySelectorAll（const plusSign = document.querySelectorAll('.fa-plus');），但根本不起作用。

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

HTML：

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

JS：

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');
  }
});
}

2 个答案:

答案 0 :(得分：1)

您需要利用传递到事件侦听器的回调函数的event对象。

event.target将为您提供被单击的a标记，event.target.firstElementChild将为您提供被单击的a标记旁边的图标。 

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

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

/* Toggle between hiding and showing the active panel */
let panel = this.nextElementSibling;
if (panel.style.display === "block") {
  panel.style.display = "none";
  e.target.firstElementChild.classList.remove('fa-minus');
  e.target.firstElementChild.classList.add('fa-plus');
} else {
  panel.style.display = "block";
  e.target.firstElementChild.classList.remove('fa-plus');
  e.target.firstElementChild.classList.add('fa-minus');
}
  });
}
.panel {
  display: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Product Page</title>
<link rel="stylesheet" href="../css/main.css" />
<link
  rel="stylesheet"
  type="text/css"
  href="/fonts/MyFontsWebfontsKit.css"
/>
<!--AOS Animate-->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<!--Font Awesome-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  </head>

  <body>
<section class="inner-content">

  <!--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>
 
</section>
<!--#inner-content-->

<!--JS-->
<script type="text/javascript" src="../lib/main.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
AOS.init();
  </script>
  </body>
</html>

答案 1 :(得分：0)

检查此。稍微修改了代码。

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

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

  /* Toggle between hiding and showing the active panel */
  let panel = this.nextElementSibling;
  if (panel.classList.contains("collapsed")) {
  	alert("open acc");
    panel.classList.remove("collapsed")
    plusSign.classList.remove('fa-plus');
    plusSign.classList.add('fa-minus');
  } else {
    alert("close acc");
    panel.classList.add("collapsed")
    plusSign.classList.remove('fa-minus');
    plusSign.classList.add('fa-plus');
  }
}
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click",toggleAccordion);
}
.panel {
  display: block;
}

.panel.collapsed {
  display: none;
}
 <!--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>
              <span class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Control &amp; Automation</span>
              <div class="panel collapsed">
                <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>
              <span class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Medium Voltage Distribution</span>
              <div class="panel collapsed">
                <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>
              <span class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Low Voltage Distribution</span>
              <div class="panel collapsed">
                <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>
              <span class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Encapsulated &amp; Specialty</span>
              <div class="panel collapsed">
                <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>
              <span class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> Custom Products</span>
              <div class="panel collapsed">
                <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>
              <span class="parent accordion" tabindex="0"><i class="fa fa-plus" aria-hidden="true"></i> OEM Products</span>
              <div class="panel collapsed">
                <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>

相关问题
最新问题