Javascript手风琴函数不会运行吗？

Question

我刚开始写Javascript，所以我试着写我自己的简单手风琴功能。我试着做，所以当我点击h2，它显示“手风琴-#”div。如果手风琴已经打开("display=block")，我想隐藏它("display=none")。当我点击h2时，什么都不会发生。我到处搜索，但我不知道我的代码有什么问题：

function initiate(i) {
    var selected = document.getElementById('accordion-'+i).style.display;
    if(selected == "block") {
        selected = "none";
    } else {
    selected = "block";
    }
}

示例HTML

<h2 onClick="initiate('6')">Project</h2>
<!-- begin code to hide/show -->
<div id="accordion-6" class="accordion">
    <div class="left">
         <p>left column text</p>
    </div>
    <div class="right">
         <p>right column text</p>
    </div>
</div> <!-- end code to hide/show -->

样本CSS

main {
  margin: auto;
  width: 660px; }

main .accordion {
    padding: 0 10px 30px 10px;
    overflow: auto; }

main .accordion .left {
  width: 200px;
  float: left; }

main .accordion .right {
  width: 420px;
  float: right; }

#accordion-0 {
  display: block; }

#accordion-1 {
  display: block; }

#accordion-2 {
  display: block; }

#accordion-3 {
  display: block; }

#accordion-4 {
  display: block; }

#accordion-5 {
  display: block; }

#accordion-6 {
  display: block; }

#accordion-7 {
  display: block; }

`

Answer 1

有几件事--首先，您要创建的变量“选中”不是您所想的那样；它不是一个可以更改为针对源元素的样式属性的对象。它是一个字符串，用于存储该属性的值。要实现您想要的结果，您需要将元素存储为var，然后使用".style.display=“来更改它。就像这样：

var TargetDiv = document.getElementById('accordion-'+i);
    if(TargetDiv.style.display == "block" || TargetDiv.style.display == "") {
        TargetDiv.style.display = "none";
    } 
    else {
        TargetDiv.style.display = "block";
    }

您将看到的另一个更改是，您的IF条件还需要检查空的style.display值；这是因为即使您通过CSS将其设置为“块”，实际的DIV标记上没有“样式”属性，因此style.display在页面加载时是空的(也就是说，当您第一次对给定的DIV运行函数时)。

jsFiddle：http://jsfiddle.net/c46qd/