- sp; 很多地方都會用到樹形目錄，比如CSDN論壇的列表，這樣的代碼也有很多，但是很多人都是拿來主義，沒有自己動手做個，下面我就和大家一起分享怎麼來自己做一個XML做數據源的TreeMenu。從中你會看到很多有用的JS腳本和頁面元素的一些重要但經常被我們忽略的屬性用法。
Step1.倒著來，看看完成後的TreeMenu是什麼樣子的？
JS腳本動態生成的Html大綱，這個是動態生成的，頁面源代碼裡沒有<div id="MyDiv">
<span class="hasItems" id="csXMLTree" style="MARGIN-LEFT: 0px" text="根目錄" expanding="true" target treeId>
<img src="images/contract.gif">根目錄</span><br>
<span style="DISPLAY: none"><span class="hasItems" id="csXMLTree" style="MARGIN-LEFT: 16px" text="目錄1" expanding="false" target treeId="1000">
<img src="images/contract.gif">目錄1</span><br>
<span class="Items" id="csXMLTree" style="MARGIN-LEFT: 32px" text="目錄1.1" expanding="false" target treeId="2000" href="Javascript:alert(this.innerHtml);">
<img src="images/endnode.gif">目錄1.1</span><br>
<span class="Items" id="csXMLTree" style="MARGIN-LEFT: 32px" text="目錄1.2" expanding="false" target="_blank" treeId="2001" href="1.htm">
<img src="images/endnode.gif">目錄1.2</span><br>
<span class="hasItems" id="csXMLTree" style="MARGIN-LEFT: 16px" text="目錄2" expanding="false" target treeId="3000">
<img src="images/contract.gif">目錄2</span><br>
<span class="Items" id="csXMLTree" style="MARGIN-LEFT: 32px" text="目錄2.1" expanding="false" target treeId="3001">
<img src="images/endnode.gif">目錄2.1</span><br>
<span class="Items" id="csXMLTree" style="MARGIN-LEFT: 32px" text="目錄2.2" expanding="false" target treeId="3002">
<img src="images/endnode.gif">目錄2.2</span><br>
<span class="Items" id="csXMLTree" style="MARGIN-LEFT: 32px" text="目錄2.3" expanding="false" target treeId="3003">
<img src="images/endnode.gif">目錄2.3</span><br>
<span class="Items" id="csXMLTree" style="MARGIN-LEFT: 32px" text="目錄2.3" expanding="false" target treeId="3004">
<img src="images/endnode.gif">目錄2.3</span><br>
<span class="hasItems" id="csXMLTree" style="MARGIN-LEFT: 16px" text="目錄3" expanding="false" target treeId="4000">
<img src="images/contract.gif">目錄3</span><br>
<span class="Items" id="csXMLTree" style="MARGIN-LEFT: 32px" text="目錄3.1" expanding="false" target treeId="4001">
<img src="images/endnode.gif">目錄3.1</span><br>
<span class="Items" id="csXMLTree" style="MARGIN-LEFT: 16px" text="目錄4" expanding="false" target treeId="5000">
<img src="images/endnode.gif">目錄4</span><br>
</span>
</div>
上面的代碼是不是看起來很亂？其實不是的，你把它粘貼到FP等可視化工具的代碼裡面，就能看清楚結構了。其實很簡單，就是SPAN網頁Tag生成一格嵌套的結構。我們接下來要寫的JS腳本的主要目的就是讀取XML文件然後生成這樣的結構。所以這個是關鍵，你一定要看明白。不妨把它先存成一個網頁，看看效果（注意，原封不動拷貝的話，只能顯示“根目錄”一項，你需要改動藍色的地方，把none去掉），除了紅色的DIV其他都是JS腳本動態生成的。class="Items"和class="hasItems"是類似這樣的樣式表單：
.hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}.Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}
察看黃色部分的樣式表，可以明白Tree結構形式上就是靠這個定義左邊距來達到效果了，通過縮緊不同的量，這樣就會很清楚把樹形構造出來了。
接下來要寫的腳本就是要通過一定的方法把上面提到的要點構造出Html代碼來。大家仔細把上面的弄明白，下面我們就開工！！！