Javascript 标题和段落的简单（新手）手风琴效果
我需要知道如何创建一个简单的手风琴效果时，h2标题被点击（只有h2标签下的div的id为“手风琴”）。标题下的段落应在隐藏时显示，或在单击标题时显示时隐藏。作业说明在HTML代码中。我大约90%在那里，但我需要帮助，看看我做错了什么。这是一个完整的新手脚本，所以我不能使用那么复杂的东西（没有innerHTML）。我需要能够访问h2标题的parentNode（它有一个div标记），并使用parentNode访问h2标题下的段落子项。所以我将在下面粘贴我的HTML、CSS和JavaScript。最后一点，我不能更改CSS或HTML，手风琴必须基于JavaScript工作。JavaScript必须有2个函数，并且只有2个函数。好的，下面是代码： HTMLJavascript 标题和段落的简单（新手）手风琴效果,javascript,html,css,accordion,nodes,Javascript,Html,Css,Accordion,Nodes,我需要知道如何创建一个简单的手风琴效果时，h2标题被点击（只有h2标签下的div的id为“手风琴”）。标题下的段落应在隐藏时显示，或在单击标题时显示时隐藏。作业说明在HTML代码中。我大约90%在那里，但我需要帮助，看看我做错了什么。这是一个完整的新手脚本，所以我不能使用那么复杂的东西（没有innerHTML）。我需要能够访问h2标题的parentNode（它有一个div标记），并使用parentNode访问h2标题下的段落子项。所以我将在下面粘贴我的HTML、CSS和JavaScript。最后
<!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>
/* 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';
}
}
}
}
/*页面加载完成后，运行preparePage函数*/
window.onload=函数preparePage（）{
/*步骤1：从HTML的accordion div部分获取所需的元素*/
var accountion=document.getElementById（'accordion'）；
var accordionHeaders=accordion.getElementsByTagName（'h2'）；
var accordiondages=accordion.getElementsByTagName（'p'）；
/*步骤2：使用for循环将AccordionPages类设置为“hidecontent”*/
对于（var i=0；iAccordionPages类名，它实际上是一个数组而不是一个元素
尝试用以下内容替换它：
accordionHeadings[i].onclick = function accordion() {
// 'this' refers to the element that was clicked
// 'nextElementSibling' gets the element directly after it
var accParagraph = this.nextElementSibling;
// now you have the right element, you can change its class
if (accParagraph.className == 'hidecontent') {
accParagraph.className = 'showcontent';
} else {
accParagraph.className = 'hidecontent';
}
}
// 'this' refers to the element that was clicked (heading)
// 'parentNode' gets its parent
// 'getElementsByTagName('p')[0]' selects the first <p> element
var accParagraph = this.parentNode.getElementsByTagName('p')[0];
编辑：
您也可以这样做：
accordionHeadings[i].onclick = function accordion() {
// 'this' refers to the element that was clicked
// 'nextElementSibling' gets the element directly after it
var accParagraph = this.nextElementSibling;
// now you have the right element, you can change its class
if (accParagraph.className == 'hidecontent') {
accParagraph.className = 'showcontent';
} else {
accParagraph.className = 'hidecontent';
}
}
// 'this' refers to the element that was clicked (heading)
// 'parentNode' gets its parent
// 'getElementsByTagName('p')[0]' selects the first <p> element
var accParagraph = this.parentNode.getElementsByTagName('p')[0];
/“this”指单击的元素（标题）
//“parentNode”获取其父节点
//“getElementsByTagName（'p'）[0]”选择第一个元素
var accparage=this.parentNode.getElementsByTagName（'p'）[0]；
首先，写得很好的问题。
使用两个功能，嗯？有几种不同的方法可以做到这一点。
您已经指定了onclicks，因此您的状态良好。但是您要为数组本身指定一个类名，而不是元素。小心点。使用[i]。类名
基本上，您需要首先找到单击的标题的索引。这很简单，因为onclick事件注册到window对象中-使用window.event.target获取targetd对象（可能因浏览器而异，因此如果分配依赖于它，请查看如何彻底执行-这在chrome和FF中肯定有效）。
使用它，您就有了对刚刚单击的对象的实际引用。由于您已经有一个标题列表，请浏览它们，看看您单击的是哪一个：
for(var i = 0; i < accordeonHeadings.length; i++){
if(window.event.target == accordeonHeadings[i]){
}
}
（变量i=0；ifor.length；i++）{
如果（window.event.target==i）{
}
}
现在在if语句中，您只需使用i的索引来访问相应的段落并对其进行更改
for(var i = 0; i < accordeonHeadings.length; i++){
if(window.event.target == accordeonHeadings[i]){
if(accordionParagraphs[i].className == 'hidecontent') {
accordionParagraphs[i].className = 'showcontent';
} else {
accordionParagraphs[i].className = 'hidecontent';
}
}
}
（变量i=0；ifor.length；i++）{
如果（window.event.target==i）{
if（accordion段落[i].className=='hidecontent'）{
手风琴段落[i]。类名='showcontent'；
}否则{
手风琴段落[i]。类名='hidecontent'；
}
}
}
应该这样做。我没有测试这段代码，它可能包含会破坏它的打字错误，所以请自己测试一下
祝你好运，兄弟。非常感谢你！！很好用！！你知道你会怎么做吗？说明：退出H2以获取其父节点。然后您可以使用parentNode返回到子段落。非常感谢。这也非常有效。你这个男人！！我对JavaScript非常陌生，但我很喜欢它，我通过来到stackoverflow学到了很多东西，感谢像你这样了不起的人。