在javascript中折叠和扩展列表
我正在使用一个教程来制作HTML中的可折叠列表 我的HTML如下所示:在javascript中折叠和扩展列表,javascript,html,Javascript,Html,我正在使用一个教程来制作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>
<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>
但是当我调用函数时,我不太确定输入什么来选择所有节点。我仍然需要每个节点上的单独控件,因此无法将所有名称更改为相同
<a href="#" onclick="test2('node????', this)">Collapse</a>
您可以使用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";
}
function test2(className) {
document.getElementById("mutualParent").className += className;
}
…并这样称呼它:
<a href="#" onclick="test2('hide-nodes')">Collapse</a>
如果要使用test()-函数切换可见性,需要先删除类名,否则它将保持隐藏状态。此外,要使此代码正常工作,您需要从
标记中删除样式属性,因为样式属性具有更高的优先级。@jlord没有理由告诉每个人您的编辑原因……我认为不使用jQuery无法做到这一点。你同意[jQuery]吗?你能举一个css方法的例子吗?实施起来很麻烦,谢谢
#mutualParent.hide-nodes li.node {
display: none;
}
function test2(className) {
document.getElementById("mutualParent").className += className;
}
<a href="#" onclick="test2('hide-nodes')">Collapse</a>