我需要知道如何在单击 h2 标题时创建一个简单的手风琴效果（只有 div 下 id 为“手风琴”的 h2 标签）。如果标题下的段落被隐藏，则应显示它们；如果单击标题时显示它们，则应隐藏它们。作业的说明在 HTML 代码中。我大约有 90% 在那里，但我需要帮助看看我做错了什么。这是一个完整的新手脚本，所以我不能使用任何复杂的东西（没有 innerHTML）。我需要能够访问 h2 标题的 parentNode（它有一个 div 标签）并使用 parentNode 来访问 h2 标题下的子段落。所以我将在下面粘贴我的 HTML、CSS 和 JavaScript。最后一点，我不能改变 CSS 或 HTML，手风琴必须基于 JavaScript 工作。JavaScript 必须有 2 个函数并且只有 2 个函数。好的，代码如下：
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Best Practices - Jason McCoy</title>
<link href="css.css" type="text/css" rel="stylesheet" />
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<h1>Accordion - Jason McCoy</h1>
<hr />
<h2>Instructions</h2>
<p>Create a simple accordion while implementing best practices.</p>
<ol>
<li>Change the part of the page heading to your name.</li>
<li>Add your name to the <title> also.</li>
<li>Create and link to an external CSS.
<ul>
<li>Create a class with a single declaration: <em>display:none;</em> Name the class <strong>.hideContent</strong>. No class attribute should be added to the HTML.</li>
<li>Create a second class with a single declaration: <em>display:block;</em> Name the class <strong>.showContent</strong>.</li>
<li>Create two more CSS rules. One should remove the bottom margin from all H2s. The other should remove the top margin from all paragraphs.</li>
</ul>
</li>
<li>Create and link to a JavaScript file.
<ul>
<li>Create exactly two functions. One called <strong>preparePage()</strong> that automatically applies the .hideContent style to all paragraphs within the accordion div and then makes the desired H2s call the second function when clicked. The second function,<strong>accordion()</strong>, performs the class switching.</li>
<li>Make preparePage() run when the page loads.</li>
<li>When an H2 inside the "accordion" div is clicked, the associated paragraph should change class so that it appears. If the paragraph is already visible, then it should disappear when its H2 is clicked.</li>
<li>No inline JavaScript should appear in the HTML. Only a SCRIPT tag should be present in the HTML. No other JavaScript should be in the HTML anywhere.</li>
<li>Study the HTML first so you know the structure! Similar to backing up out of folders (like you did in NOS-110 using subdirectory markers) you will have to "back up" out of the H2 to get its parentNode. Then you can use that parentNode to descend back down to the child paragraph.</li>
</ul>
</li>
</ol>
<p>The only changes to this HTML file should be the addition of a <script> tag to link to your JS file, the addition of a <link> tag to link to your CSS, and the addition of your name to both the title and page heading.</p>
<div id="accordion">
<div>
<h2>What is Lorem Ipsum?</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry..</p>
</div>
<div>
<h2>Where does it come from?</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text..</p>
</div>
<div>
<h2>Why do we use it?</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
<div>
<h2>Where can I get some?</h2>
<p>There are many variations of passages of Lorem Ipsum available</p>
</div>
</div>
</body>
</html>
CSS
/* create a class that hides the text */
.hidecontent {
display: none;
}
/* create a class that shows the text */
.showcontent {
display: block;
}
/* h2 rules */
h2 {
margin-bottom: 0;
}
/* paragraph rules */
p {
margin-top: 0;
}
JavaScript
/* once the page finishes loading, run the preparePage function */
window.onload = function preparePage() {
/* Step 1: get the necessary elements needed from the accordion div section of the HTML */
var accodion = document.getElementById('accordion');
var accordionHeadings = accordion.getElementsByTagName('h2');
var accordionParagraphs = accordion.getElementsByTagName('p');
/* Step 2: use a for loop to set the class of the accordionParagraphs to 'hidecontent' */
for (var i = 0; i < accordionParagraphs.length; i++) {
accordionParagraphs[i].className = 'hidecontent';
}
/* Step 3: use a for loop to get to the headings
* when a heading is clicked,
* run the accordion function
*/
for(var i = 0; i < accordionHeadings.length; i++) {
accordionHeadings[i].onclick = function accordion() {
if(accordionParagraphs.className == 'hidecontent') {
accordionParagraphs.className = 'showcontent';
} else {
accordionParagraphs.className = 'hidecontent';
}
}
}
}