我有一个手风琴,我想为其添加一堂课,但是却很难做到这一点。将.faq-active附加到'a'和'content'div可以正常工作,但是我试图将一个活动类附加到'accordion-item'的父div上,这似乎不起作用。值得注意的是,我正在尝试追加到父类,因此,如果有更有效的方法,我可以接受。
结构:
<div class="faq-accordion">
<div class="accordion-item">
<a>FAQ Title</a>
<div class="content">
FAQ Description
</div>
</div>
<div class="accordion-item">
<a>FAQ Title</a>
<div class="content">
FAQ Description
</div>
</div>
</div>
Javascript:
<script>
const accordion_item = document.querySelectorAll(".accordion-item");
const items = document.querySelectorAll(".faq-accordion a");
function accordion(){
this.classList.toggle('accordion-active');
}
function toggleAccordion(){
this.classList.toggle('faq-active');
this.nextElementSibling.classList.toggle('faq-active');
}
accordion_item.forEach(accordion => accordion.addEventListener('click', accordion));
items.forEach(item => item.addEventListener('click', toggleAccordion));
</script>
非常感谢您的帮助。
答案 0 :(得分:0)
您的问题似乎是您正在将元素传递到addEventListener
参数中。
accordion_item.forEach(accordion => accordion.addEventListener('click', accordion));
变量accordion
被设置为forEach
循环中的元素,但是您希望accordion
是一个函数。解决方案非常简单,只需更改函数名称或forEach
中的变量名称即可。
工作代码:
const accordion_item = document.querySelectorAll(".accordion-item");
const items = document.querySelectorAll(".faq-accordion a");
function accordion() {
this.classList.toggle('accordion-active');
}
function toggleAccordion() {
this.classList.toggle('faq-active');
this.parentElement.classList.toggle('faq-active');
}
accordion_item.forEach(element => element.addEventListener('click', accordion));
items.forEach(item => item.addEventListener('click', toggleAccordion));
body {
user-select: none;
}
.accordion-item {
background-color: rgba(255, 0, 0, 0.5);
border: 3px solid blue;
cursor: pointer;
margin-top: 5px;
color: #000;
}
.content {
background-color: rgba(0, 255, 0, 0.2);
}
.faq-active {
color: #fff;
}
.accordion-active {
border: 3px solid red;
}
<div class="faq-accordion">
<div class="accordion-item">
<a>FAQ Title</a>
<div class="content">
FAQ Description
</div>
</div>
<div class="accordion-item">
<a>FAQ Title</a>
<div class="content">
FAQ Description
</div>
</div>
</div>
答案 1 :(得分:0)
const faq_accordion = document.querySelector(".faq-accordion");
const accordion_item = document.querySelectorAll(".accordion-item");
const items = document.querySelectorAll(".faq-accordion a");
faq_accordion.addEventListener('click', faqAccordion);
function faqAccordion(){
this.classList.toggle('accordion-active');
}
function accordion(){
this.classList.toggle('accordion-active');
}
function toggleAccordion(){
this.classList.toggle('faq-active');
this.nextElementSibling.classList.toggle('faq-active');
}
accordion_item.forEach(accordion => accordion.addEventListener('click', accordion));
items.forEach(item => item.addEventListener('click', toggleAccordion));
<div class="faq-accordion">
<div class="accordion-item">
<a>FAQ Title</a>
<div class="content">
FAQ Description
</div>
</div>
<div class="accordion-item">
<a>FAQ Title</a>
<div class="content">
FAQ Description
</div>
</div>
</div>
答案 2 :(得分:0)
我将使用一个简单的切换器,然后您可以确定要做什么。 照原样,如果您单击并没有激活它,则它将激活它,否则将使另一个无效,并使被单击的一个激活。我以两种方式做到了这一点,一种是在元素上,另一种是在父元素上,这样您就可以了解它如何工作。我在课堂上加了边框以作说明。尝试点击“常见问题说明”或“常见问题标题”
const accordion_item = document.querySelectorAll(".accordion-item > .content");
const items = document.querySelectorAll(".faq-accordion a");
function doToggle(classT, el) {
let cActive = document.querySelectorAll("." + classT);
let elActive = cActive[0];
let isSame = el == elActive;
//console.log('doToggle',classT, aActive, "el:", el, "isSame:", isSame);
if (!!cActive.length && !isSame) {
elActive.classList.toggle(classT, false);
}
if (!el.length) {
el.classList.toggle(classT);
}
}
function itemToggle(event) {
let classT = 'accordion-active';
event.stopPropagation();
let closestElement = this.closest('.accordion-item');
doToggle(classT, closestElement);
}
function toggleFaq(event) {
let classT = 'faq-active';
event.stopPropagation();
doToggle(classT, this);
}
accordion_item.forEach(item => item.addEventListener('click', itemToggle));
items.forEach(item => item.addEventListener('click', toggleFaq));
.accordion-active {
border: solid lime 1px;
}
.faq-active {
border: solid blue 1px;
}
<div class="faq-accordion ">
<div class="accordion-item">
<a>FAQ Title</a>
<div class="content">
FAQ Description
</div>
</div>
<div class="accordion-item">
<a>FAQ Title</a>
<div class="content">
FAQ Description
</div>
</div>
</div>