求：Javascript如何把UL LI形式的转换成树型结构显示

Question

<ul id="menu">
<li><a href="untitled.asp">Menu1</a>
<ul>
<li><a href="#">Menu1-1</a></li>
<li><a href="#">Menu1-2</a></li>
<li><a href="#">Menu1-3</a></li>
<li><a href="#">Menu1-4</a>
<ul>
<li><a href="#">Menu1-4-1</a></li>
<li><a href="#">Menu1-4-2</a></li>
<li><a href="#">Menu1-4-3</a></li>
<li><a href="#">Menu1-4-4</a></li>
<li><a href="#">Menu1-4-5</a></li>
</ul>
</li>
<li><a href="#">Menu1-5</a></li>
</ul>
</li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a>
<ul>
<li><a href="#">Menu3-1</a></li>
<li><a href="#">Menu3-2</a></li>
<li><a href="#">Menu3-3</a></li>
<li><a href="#">Menu3-4</a></li>
<li><a href="#">Menu3-5</a></li>
</ul>
</li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
</ul>

Answer 1

<style>
  ul,li{
    list-style: none;
    padding:0px;
  }
  #menu ul{
    padding-left:40px;  
  }
  #menu li{
    background:url(http://bbs.csdn.net/assets/page-14a5d3a98117c459e7e0cdd8f04e1d76.gif) no-repeat;  
  }
  #menu li a{
    padding-left: 18px;  
  }
   #menu li.menuItem{
      background:url(http://bbs.csdn.net/assets/nolines_minus-18fe59b65521ce9d0f01474ed4ff7c0d.gif) no-repeat;  
   }
   #menu li.menuItemClose{
      background:url(http://bbs.csdn.net/assets/nolines_plus-b36bc9705d25e7f1e204e4521fdf3713.gif) no-repeat;  
   }
   #menu li.menuItemClose ul{ display:none }
   .menuText{
      padding-left:0px;
      margin-left: 20px;
    }
</style>
<ul id="menu">
  <li class="menuItem" ><a class="menuText" href="untitled.asp">Menu1</a>
    <ul>
      <li><a href="#">Menu1-1</a></li>
      <li><a href="#">Menu1-2</a></li>
      <li><a href="#">Menu1-3</a></li>
      <li class="menuItem" ><a class="menuText"href="#">Menu1-4</a>
        <ul>
          <li><a href="#">Menu1-4-1</a></li>
          <li><a href="#">Menu1-4-2</a></li>
          <li><a href="#">Menu1-4-3</a></li>
          <li><a href="#">Menu1-4-4</a></li>
          <li><a href="#">Menu1-4-5</a></li>
        </ul>
      </li>
      <li><a href="#">Menu1-5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu2</a></li>
  <li class="menuItem" ><a  class="menuText" href="#">Menu3</a>
    <ul>
      <li><a href="#">Menu3-1</a></li>
      <li><a href="#">Menu3-2</a></li>
      <li><a href="#">Menu3-3</a></li>
      <li><a href="#">Menu3-4</a></li>
      <li><a href="#">Menu3-5</a></li>
    </ul>
  </li>
  <li><a href="#">Menu4</a></li>
  <li><a href="#">Menu5</a></li>
</ul><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script  >
 $(".menuItem").click(function(evt){
   this.className=this.className=='menuItem'?'menuItemClose':'menuItem';
  evt.stopPropagation();
 });
</script>

Answer 2

1,你去找个js树的控件
2,在上面源的改一下加入步加载的功能, 
 <li class="menuItem" dataId="1" ><a class="menuText" href="untitled.asp">Menu1</a>
 比如 加个数据ID，通过dataId，ajax取子级数据 ，生成子级的li列表