js实现目录树

第一步：HTML结构

1 <div class="folderDiv">
2    <p>目录</p>
3    <ul class="folder"></ul>
4 </div>

第二步：CSS样式

1 /*目录树*/
2 .folderDiv {
   width: 14%;float: left;height: auto;overflow: auto;border:1px solid #ccc;border-top:2px solid #15a4fa;}
3 .folderDiv p{
   height: 25px;padding-left: 6px;line-height: 25px;}
4 .folderDiv .folder{
   width: 100%;height:396px;}
5 .folder li {
   list-style: none;}
6 .folder li span{
   display: inline-block;height: 25px;line-height: 25px;padding-left: 14px;font-size: 12px;white-space: nowrap;}
7 .folder li span:hover{
   cursor: pointer;}

第三步：JS函数

  1 //创建目录树
  2 folderAjax();
  3 //ajax请求
  4 function folderAjax() {
  5     var folder; //用于接收后台获取的目录树对象
  6     var folder_span; //ajax获取目录树下的所有span数量,最后赋值