h2 見出しがクリックされたときに単純なアコーディオン効果を作成する方法を知る必要があります (「アコーディオン」の ID を持つ div の下にある h2 タグのみ)。見出しの下の段落は、見出しがクリックされたときに非表示の場合は表示され、表示されている場合は非表示になります。割り当ての指示は HTML コードにあります。私はそこに約90％いますが、私が間違っていることを理解する助けが必要です. これは完全な初心者用スクリプトなので、それほど複雑なものは使用できません (innerHTML は使用できません)。h2 見出し (div タグを持つ) の parentNode にアクセスし、parentNode を使用して h2 見出しの下にある段落の子にアクセスできるようにする必要があります。HTML、CSS、JavaScript を以下に貼り付けます。最後にもう 1 つ、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';
}
}
}
}