我想做一些事情,例如当我点击网页上的按钮时,它会显示一个可展开的列表,而不是从头开始显示可展开的列表。我所做的是使用库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"> </span>Parent';
response += '\n<ul>';
response += '\n<li class="liBullet"><span class="bullet"> </span>child 1</li>';
response += '\n<li class="liBullet"><span class="bullet"> </span>child 2</li>';
response += '\n</ul>';
response += '\n</li>\n';
document.getElementById("tree").innerHTML = response;
但这不起作用。它显示了一个列表,但不是可扩展/可缩放的。
你知道如何解决这个问题吗?
感谢。
答案 0 :(得分:1)
您需要添加一个隐藏功能。
每次单击“显示”按钮时,#tree节点的html将被showTree函数中的html替换。
最简单的方法是让showTree函数的最后一个操作隐藏“显示”按钮并取消隐藏“隐藏”按钮。当用户单击“隐藏”按钮时,它将触发hideTree或您为新功能命名的任何内容,并折叠/隐藏列表。