动态生成javascript可扩展列表

时间:2011-05-26 22:27:10

标签: javascript expandablelistview

我想做一些事情,例如当我点击网页上的按钮时,它会显示一个可展开的列表,而不是从头开始显示可展开的列表。我所做的是使用库mktree.js和mktree.css

<script src="mktree.js" language="javascript"></script>
<link rel="Stylesheet" href="mktree.css" />

然后创建一个静态标签和一个按钮:

<ul class="mktree" id="tree"></ul>
<button type="button" onclick="showTree()">Show</button>

在showTree()函数中,我构建了树的内部内容并将其写入标记的innerHTML值:

response = '\n<li class="liOpen"><span class="bullet">&nbsp;</span>Parent';
response += '\n<ul>';
response += '\n<li class="liBullet"><span class="bullet">&nbsp;</span>child 1</li>';
response += '\n<li class="liBullet"><span class="bullet">&nbsp;</span>child 2</li>';
response += '\n</ul>';
response += '\n</li>\n';
document.getElementById("tree").innerHTML = response;

但这不起作用。它显示了一个列表,但不是可扩展/可缩放的。

你知道如何解决这个问题吗?

感谢。

1 个答案:

答案 0 :(得分:1)

您需要添加一个隐藏功能。

每次单击“显示”按钮时,#tree节点的html将被showTree函数中的html替换。

最简单的方法是让showTree函数的最后一个操作隐藏“显示”按钮并取消隐藏“隐藏”按钮。当用户单击“隐藏”按钮时,它将触发hideTree或您为新功能命名的任何内容,并折叠/隐藏列表。