動態生成javascript可擴展列表

Question

我想做點什麼，比如當我點擊網頁上的一個按鈕時，它會顯示一個可擴展列表，而不是從一開始就顯示可擴展列表。使用庫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; 

但是這並不奏效。它顯示了一個列表，但不能擴展/可以放大。

你知道有什麼辦法可以解決這個問題嗎？

謝謝。

Answer 1

您需要添加一個隱藏功能。

每次單擊「顯示」按鈕時，#tree節點的html將被showTree函數中的html代替。

最簡單的方法是讓showTree函數的最後一個操作隱藏「顯示」按鈕並取消隱藏「隱藏」按鈕。當用戶點擊隱藏按鈕時，它會觸發hideTree或任何你命名你的新功能，並摺疊/隱藏列表。