자바 스크립트 아코디언 기능이 실행되지 않습니까?

Question

저는 자바 스크립트를 처음 사용하기 때문에 간단한 아코디언 기능을 작성하려고합니다. 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

몇 가지 - 첫째 , 당신이 만들고있는 변수 "selected"는 당신이 생각하는 것과 다르다. 소스 요소의 스타일 속성을 대상으로 변경할 수있는 개체가 아닙니다. 이 속성의 값이 무엇인지 저장하는 문자열입니다. 원하는 것을 성취하기 위해 요소를 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/