HTML
我想在类的div中插入FAQ问题"截面中心"；
<body>
<section class="questions">
<div class="title">
<h2>FAQ SECTION</h2>
</div>
<div class="section-center">
<!-- dynamic data insert here -->
</div>
</section>
<!-- script -->
<script src="/script.js"></script>
</body>
</html>
CSS
在js的帮助下，我们将添加/删除"；显示文本"；班当"；显示文本"；已添加。'"问题文本"类将有显示块(问题的答案将可见)，"减号图标"类将内联显示(减号图标将可见，最初是隐藏的)，"加号图标"将不显示(加号图标将可见)。
.question-text {
display: none;
}
.show-text .question-text {
display: block;
}
.minus-icon {
display: none;
}
.show-text .minus-icon {
display: inline;
}
.show-text .plus-icon {
display: none;
}
JS
这是的问答阵列
const faq = [
{
ques: 'this is test question',
answer: 'this is test answer ',
},
{
ques: 'this is test question',
answer: 'this is test answer ',
},
]
遍历要插入问题/答案的DOM。
const sectionCenter = document.querySelector('.section-center');
当网页加载displayQuestion时，调用函数来显示问题答案。
window.addEventListener('DOMContentLoaded', () => {
displayQuestions(faq);
});
const questions = document.querySelectorAll('.question');
//console.log(questions);
这部分代码允许在单击切换按钮打开下一个问题时自动关闭打开的问题。
questions.forEach((question) => {
const btn = question.querySelector('.question-btn');
btn.addEventListener('click', () => {
questions.forEach((curQuestion) => {
if (curQuestion !== question) {
curQuestion.classList.remove('show-text');
}
});
question.classList.toggle('show-text');
});
});
显示问题/答案的功能
// function to display questions
function displayQuestions(items) {
let display = items.map(({ ques, answer }) => {
return `
<article class="question">
<div class="question-title">
<P>${ques}</P>
<button type="button" class="question-btn">
<span class="plus-icon">
<i class="far fa-plus-square"></i>
</span>
<span class="minus-icon">
<i class="far fa-minus-square"></i>
</span>
</button>
</div>
<div class="question-text">
<p>${answer}</p>
</div>
</article>
`;
});
display = display.join('');
// console.log(display);
sectionCenter.innerHTML = display;
}
在这里，我已经将与向问题按钮添加事件侦听器相关的代码移动到一个名为addEventListenersToQuestions的函数中，并在DOMContentLoaded事件侦听器回调函数中运行displayQuestions后调用该函数。
原因是，尽管向按钮添加事件侦听器的代码按源代码顺序在displayQuestions代码之后，但它实际上是在displayQuestions运行之前运行的。在JS事件中，侦听器回调只会在当前执行的代码段之后的某个时间运行。
const faq = [
{
ques: 'this is test question 1',
answer: 'this is test answer 1',
},
{
ques: 'this is test question 2',
answer: 'this is test answer 2',
},
];
const sectionCenter = document.querySelector('.section-center');
window.addEventListener('DOMContentLoaded', () => {
displayQuestions(faq);
addEventListenersToQuestions();
});
function addEventListenersToQuestions() {
const questions = document.querySelectorAll('.question');
questions.forEach((question) => {
const btn = question.querySelector('.question-btn');
btn.addEventListener('click', () => {
questions.forEach((curQuestion) => {
if (curQuestion !== question) {
curQuestion.classList.remove('show-text');
}
});
question.classList.toggle('show-text');
});
});
}
// function to display questions
function displayQuestions(items) {
let display = items.map(({ ques, answer }) => {
return `
<article class="question">
<div class="question-title">
<P>${ques}</P>
<button type="button" class="question-btn">
<span class="plus-icon">
+
</span>
<span class="minus-icon">
-
</span>
</button>
</div>
<div class="question-text">
<p>${answer}</p>
</div>
</article>
`;
});
display = display.join('');
// console.log(display);
sectionCenter.innerHTML = display;
}.question-text {
display: none;
}
.show-text .question-text {
display: block;
}
.minus-icon {
display: none;
}
.show-text .minus-icon {
display: inline;
}
.show-text .plus-icon {
display: none;
}<section class="questions">
<div class="title">
<h2>FAQ SECTION</h2>
</div>
<div class="section-center">
<!-- dynamic data insert here -->
</div>
</section>