[英]How to toggle accordion between plus and minus sign?
I have 6 parent accordion links, all with children.我有 6 个家长手风琴链接,全部都有孩子。 To the left, they contain font awesome plus signs.
在左侧,它们包含字体真棒加号。
I want to, on click, toggle the plus sign into a minus sign.我想在单击时将加号切换为减号。
Currently I have my plusSign variable grabbing just the first plus sign to show that it works (using const plusSign = document.querySelector('.fa-plus');
).目前,我的 plusSign 变量只抓取第一个加号以表明它有效(使用
const plusSign = document.querySelector('.fa-plus');
)。
Works great for the first link.非常适合第一个链接。 However, I want this to affect all instances.
但是,我希望这会影响所有实例。
I tried using querySelectorAll ( const plusSign = document.querySelectorAll('.fa-plus');
), but it just doesn't work at all.我尝试使用 querySelectorAll (
const plusSign = document.querySelectorAll('.fa-plus');
),但它根本不起作用。
Code is at the link above but here's the code below just in case:代码在上面的链接中,但为了以防万一,这里是下面的代码:
HTML: 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 & 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 & 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: 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');
}
});
}
You need to make use of event
object that is passed to the callback function of event listener.你需要使用
event
传递给事件侦听器的回调函数的对象。
event.target
will give you the a
tag that was clicked on, event.target.firstElementChild
will give you the icon next to the a
tag that was clicked on. event.target
会给你a
被点击a
标签, event.target.firstElementChild
会给你a
被点击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 & 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 & 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>
Check this.检查这个。 Edited your code a bit.
稍微编辑了您的代码。
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 & 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 & 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.