자바 스크립트의 축소 및 확장 목록

Question

자습서를 사용하여 HTML로 축소 가능 목록을 만듭니다.

내 HTML은 다음과 같습니다,

<li> 
    <a href="#" onclick="test('node1')">hello</a> 
    <ul id="node3" style="display:none"> 
     <li>Sub-item 1</li> 
     <li>Sub-item 2</li> 
    </ul> 
</li> 
<li> 
    <a href="#" onclick="test('node2')">test</a> 
    <ul id="node3" style="display:none"> 
     <li>Sub-item 1</li> 
     <li>Sub-item 2</li> 
    </ul> 
</li> 

노드 3,4,5 등

내가 사용하여 다음 자바 스크립트를 모든 테이블을 축소하기 위해 노력하고있어 :

function test2(id, link) { 
    var e = document.getElementById(id); 
    if (e.style.display == '') { 
     e.style.display = 'none'; 
     link.innerHTML = 'Expand'; 
    } else { 
     e.style.display = ''; 
     link.innerHTML = 'Collapse'; 
    } 
} 

그러나 함수를 호출 할 때 모든 노드를 선택하기 위해 무엇을 입력해야하는지 확실하지 않습니다. 각 노드마다 개별 컨트롤이 필요하므로 모든 이름을 동일하게 변경할 수는 없습니다.

<a href="#" onclick="test2('node????', this)">Collapse</a> 

Answer 1

클래스 속성을 사용할 수 있습니다.

<li> 
<a href="#" onclick="test('node1')">hello</a> 
<ul id="node1" class="node" style="display:none"> 
    <li>Sub-item 1</li> 
    <li>Sub-item 2</li> 
</ul> 
</li> 
<li> 
<a href="#" onclick="test('node2')">test</a> 
<ul id="node2" class="node" style="display:none"> 
    <li>Sub-item 1</li> 
    <li>Sub-item 2</li> 
</ul> 
</li> 

당신이 정말 당신이 뭔가를 쓸 수있는 가시성을 전환 그들 모두 축소하지 할 것을 가정

...

function test2(className, link) { 
var e = document.getElementsByClassName(className); 

for (var i = 0, len = e.length; i < len; i++) { 
    e[i].style.display = "none"; 
} 

link.innerHTML = "Expand"; 
} 

... 그리고 그런 식으로 전화를 ...

<a href="#" onclick="test2('node', this)">Collapse</a> 

getElementsByClassName은 이전 브라우저 (< IE9)에서는 작동하지 않습니다.

업데이트 : 이것을 달성하기위한 또 다른 방법은 CSS를 사용하고 상호 상위 요소의 클래스 이름을 변경하는 것입니다. 다음은 샘플 CSS에 해당하는 코드입니다 :

#mutualParent.hide-nodes li.node { 
display: none; 
} 

다음

이 같은 함수를 변경 ...

function test2(className) { 
document.getElementById("mutualParent").className += className; 
} 

은 ... 그리고 그런 식으로 전화 :

<a href="#" onclick="test2('hide-nodes')">Collapse</a> 

당신이 원하는 경우 test() 함수를 사용하여 가시성을 전환하려면 className을 먼저 제거해야합니다. 그렇지 않으면 숨겨진 상태로 유지됩니다. 또한이 코드가 작동하려면 스타일 속성이 우선 순위가 높기 때문에 <ul> 태그에서 스타일 속성을 제거해야합니다.