Question

我刚开始编写Javascript，所以我正在尝试编写自己的简单手风琴函数。我正试图这样做，当我点击h2时它会显示“accordion-＃”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/

Javascript手风琴功能不会运行？

1 个答案: