在我的JS课程中,我的任务是编辑FAQs应用程序,除了一次只能显示一个答案。换句话说,当用户单击标题以显示文本时,必须隐藏其他答案。对于我的生活,我无法弄清楚我需要做些什么来让其他标题关闭。
"use strict";
var $ = function(id) { return document.getElementById(id); };
// the event handler for the click event of each h2 element
var toggle = function() {
var h2 = this; // clicked h2 tag
var div = h2.nextElementSibling; // h2 tag's sibling div tag
// toggle plus and minus image in h2 elements by adding or removing a
class
if (h2.hasAttribute("class")) {
h2.removeAttribute("class");
} else {
h2.setAttribute("class", "minus");
}
// toggle div visibility by adding or removing a class
if (div.hasAttribute("class")) {
div.removeAttribute("class");
} else {
div.setAttribute("class", "open");
}
};
window.onload = function() {
// get the h2 tags
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
// attach event handler for each h2 tag
for (var i = 0; i < h2Elements.length; i++ ) {
h2Elements[i].onclick = toggle;
}
HTML是:
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2><a href="#">What is jQuery?</a></h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2><a href="#">Why is jQuery becoming so popular?</a></h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
像这样的东西会起作用并且相当简单。
const hideAll = () => document.querySelectorAll('.answer').forEach(e => e.classList.add('hide'));
document.addEventListener('click', (e) => {
if(e.target.matches('a')) {
hideAll();
e.target.parentNode.nextElementSibling.classList.remove('hide');
}
});
.hide {
display: none;
}
<h2><a href="#">What is JavaScript?</a></h2>
<div class="answer">
<p>JavaScript is a browser-based programming language that makes web pages more responsive and saves round trips to the server.
</p>
</div >
<h2><a href="#">What is jQuery?</a></h2>
<div id="test" class="answer hide">
<p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop websites.
</p>
</div>
<h2><a href="#">Why is jQuery becoming so popular?</a></h2>
<div class="answer hide">
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
最简单的方法是从一个隐藏的类开始,让我们说faq的内容上的.hide
然后点击相关的一个删除.hide
类,但就在此之前,再次将它添加到所有元素。
<div id="faq">
<h2>Question 1</h2>
<p class="hide">Answer 1</p>
<h2>Question 2</h2>
<p class="hide">Answer 2</p>
</div>
const questions = document.querySelectorAll('#faq h2');
const answers = document.querySelectorAll('#faq p');
questions.forEach(q => q.addEventListener('click', e => {
answers.forEach(a => a.classList.add('hide'));
e.target.nextElementSibling.classList.remove('hide');
}))
p.hide {
display: none;
}
你可以在这里查看代码:https://playcode.io/280470?tabs=console&index.html&output