在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>标签中删除样式属性，因为样式属性具有更高的优先级。