左边是目录树的那种界面都采用什么技术做的啊？

使用<DIV id="L1" onclick="folderClick()">目录名称</DIV>
      <DIV id="L2" onclick="folderClck()">子目录名称</DIV>
做成目录结构。
名称前面可以插入目录图片用以更直观的表示。
然后参照下面的例子：
<script language="javascript">
<!--
var arrLevel = new Array();
var bLoaded = false;
var FOLDER_OPEN_ICON = "folder_open.png";
var FOLDER_CLOSE_ICON = "folder_close.png";
var FOLDER_OPEN_PATH = "../images/" + FOLDER_OPEN_ICON;
var FOLDER_CLOSE_PATH = "../images/" + FOLDER_CLOSE_ICON;
var bLogouting = false;
function loadCount(){
var divs = document.all.tags("DIV");
var divt,i;
i=0;
for(i=0;i!=divs.length;i++){
arrLevel[i] = countSpace(divs[i].innerText);
//alert(divs[i].id + ":" + arrLevel[i]);
}
}function folderClick(){
var eventSource = window.event.srcElement; if(bLoaded == false){
loadCount();
bLoaded = true;
} bOpen = toggleFolder(eventSource);
toggleChildrenFolder(eventSource,bOpen);}function toggleChildrenFolder(eventSource,bOpen){
var currentObj; if(eventSource.tagName != "DIV"){
currentObj = eventSource.parentElement;
}else{
currentObj = eventSource;
}// alert(currentObj.id);
var divs = document.all.tags("DIV");
var dStyle;
if(bOpen){ dStyle = "block";}
else{ dStyle = "none";} var i,bHit = false,cLevel;;
i=0;
while(i<divs.length){
cLevel = arrLevel[i];
if(divs[i++].id == currentObj.id ){
bHit = true;
break;
}
}
if(bHit){
//alert(i + ":" + divs.length + ":" + bOpen);
while(i<divs.length){
if(bOpen){ // Children
//alert(arrLevel[i] +":" + cLevel + ":" + divs[i].id);
if(arrLevel[i] == cLevel+1){
//from item under one level of the this level at open the folder
divs[i].style.display = dStyle;
}
if(arrLevel[i] <= cLevel){
break;
}
}else{
//from all level under this level at close the folder
if(arrLevel[i] > cLevel){
divs[i].style.display = dStyle;
if(divs[i].className == "Menu_title"){
//now, CLASS="HAND" is only folder
closeFolder(divs[i]);
}
}else{
break;
}
}
i++;
}
}
}function toggleFolder(eventSource){
var re,eSource;
var bOpen; if(eventSource.tagName == "FONT"){
eSource = eventSource.parentElement.children[0];
} else if(eventSource.tagName == "IMG"){
eSource = eventSource;
} else if(eventSource.tagName == "DIV"){
eSource = eventSource.children[0];
}
window.event.cancelBubble = true; if(eSource.src.indexOf(FOLDER_OPEN_ICON)>=0){
eSource.src = FOLDER_CLOSE_PATH;
bOpen = false;
}else{
eSource.src = FOLDER_OPEN_PATH;
bOpen = true;
}
return(bOpen);
}function closeFolder(eventSource){
var re,eSource;
var bOpen; if(eventSource.tagName != "IMG"){
eSource = eventSource.children[0];
window.event.cancelBubble = true;
}else{
eSource = eventSource;
window.event.cancelBubble = true;
} eSource.src = FOLDER_CLOSE_PATH;}
function countSpace(strTarget){
var spaceCounter = 0;
var bStart = true; for(var i=0;i<strTarget.length;i++){
if(strTarget.substr(i,1) == " " && bStart){
spaceCounter++;
}else{
bStart = false;
}
}
return(spaceCounter);
}
  
//-->
 </SCRIPT>