文章/答案/技术大牛

发布

社区首页 >问答首页 >带有标题和段落的简单(新手)手风琴效果

问带有标题和段落的简单(新手)手风琴效果
EN

Stack Overflow用户

提问于 2012-10-01 02:11:37

回答 2查看 1.4K关注 0票数 2

我需要知道如何创建一个简单的手风琴效果时，一个h2标题被点击(只有h2标签下的div与id“手风琴”)。标题下的段落如果隐藏，则应显示；如果单击标题，则应隐藏它们。分配的方向在HTML代码中。我大约有90%在那里，但我需要帮助，看看我做错了什么。这是一个完整的新手脚本，所以我不能使用那么复杂的东西(没有innerHTML)。我需要能够到达parentNode of h2标题(其中有一个div标记)，并使用parentNode来获取h2标题下的子段。因此，我将粘贴我的HTML，CSS和JavaScript下面。最后一个注意事项，我不能改变CSS或HTML，手风琴必须基于JavaScript工作。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 &lt;title&gt; 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 &quot;back up&quot; 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 &lt;script&gt; tag to link to your JS file, the addition of a &lt;link&gt; 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';
            }
        }
    }
}

css

accordion

nodes

javascript

html

回答 2

Stack Overflow用户

发布于 2012-10-01 02:36:17

我认为问题在于，在步骤3中，您尝试设置className of accordionParagraphs，它实际上是一个数组，而不是一个元素。

试着用这样的东西来代替它：

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];

票数 1

Stack Overflow用户

发布于 2012-10-01 02:48:58

写得很好，首先。使用两个函数，嗯？有几种不同的方法可以做到这一点。你已经分配了点击数，所以你的状态很好。但是您要为accordeonParagraphs数组本身分配一个类名，而不是元素。那儿小心点。用accordionParagraphsi.className..。

基本上，您需要首先找到单击标题的索引。这很容易，因为onclick事件注册了窗口对象--通过使用window.event.target获取目标对象(每个浏览器可能有所不同，因此如果您的任务依赖于它，可以查找如何彻底完成它--这在chrome和FF中是肯定的)。使用该方法，您可以获得对刚才单击的对象的实际引用。既然您已经有了一个标题列表，那么运行它们并查看哪个是您单击的标题：

for(var i = 0; i < accordeonHeadings.length; i++){
    if(window.event.target == accordeonHeadings[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';
        }
    }
}

这样就行了。我没有测试这段代码，它可能包含会破坏它的排字，所以你自己来测试它。

祝你好运兄弟。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12666800

复制

相似问题

问带有标题和段落的简单(新手)手风琴效果
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有标题和段落的简单(新手)手风琴效果EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有标题和段落的简单(新手)手风琴效果
EN