3

我正在使用教程在 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>
4

1 回答 1

3

您可以为此使用 class 属性。

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

于 2012-11-06T21:26:32.527 回答