在javascript中摺疊和展開列表

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等

我試圖用摺疊所有這些表下面的JavaScript：

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）。

UPDATE： 實現這一目標的另一種方法是使用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>標籤中刪除樣式屬性，因爲樣式屬性具有更高的優先級。