能否给个简单的树形菜单代码，网上找了很多，包括梅花雪的，都很长，一下子看不懂

给你个简单的ie下能运行通过。
<style type="text/css">
<!--
body, ul, li {
  font-size:12px;
  /*list-style-image: url(tree/plus.png);
  line-height: 12px;*/
}
-->
</style>
<ul id="root" onClick="clickTree();" style="cursor:hand;">
  <li> 太平洋电脑网
    <ul>
      <li><a href="http://news.sina.com.cn">软件资讯</a></li>
      <li><a href="http://www.pconline.com.cn">硬件资讯</a></li>
      <li>FLASH剧场</li>
      <li>特效</li>
      <li> 设计素材
        <ul>
          <li>设计素材</li>
          <li>代码素材
            <ul>
              <li>特效</li>
              <li>特效</li>
              <li>特效</li>
              <li>整蛊</li>
              <li>图像</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<script language="JavaScript">
<!--
//浏览器检测，以适应不同浏览器，代码进行中...
var ie4 = document.all;
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all; 
//浏览器检测，以适应不同浏览器，代码进行中...
function clickTree(){
  event.cancelBubble = true;
  //event.srcElement.style.color = "red";
  var elements = event.srcElement.children;
  if (elements.length > 0){
    for (var i = 0; i < elements.length; i++){
      if (elements[i].tagName.toLowerCase() == "ul"){
        if (elements[i].style.display == "none"){
          elements[i].style.display = "";
          event.srcElement.style.listStyleImage = "url(tree/minus.png)";
        } else {
          elements[i].style.display = "none";
          event.srcElement.style.listStyleImage = "url(tree/plus.png)"
        }
      }
    }
  }
}function initialize(element){
  if (element.children.length > 0){
    element.style.listStyleImage = "url(tree/minus.png)"
    for (var i = 0; i < element.children.length; i++){
      initialize(element.children[i]);
    }
  } else {
    element.style.listStyleImage = "url(tree/page.png)"
  }
}
initialize(document.getElementById("root"));
//-->
</script>

解决方案 »

  1.   

    meizz的web树是我见过最强大的。
      

  2.   

    一般通过节点的block和none属性
    设置接点显示还是隐藏!
    var sh=node.expanded?"block":"none"
      

  3.   

    网上GOOGLE一下N多例子,都是通过javascript来实现的
      

  4.   

    梅花雪的树是靠字符串来初始化树的,按照一定的格式组织字符串就可以了.数据可以采用各种方式获得.格式记不太清楚了: tree[1_1] = "id:88888;name=loveyou";
    大概就是这样的.
    可以用jstl里的foreach标签吧,唉,jstl也忘光了.
      

  5.   

    给你一个很短的，ie和firefox中都可运行<body>
    <span id='menu'>
    <table border=0 cellSpacing=0 cellPadding=0 width=100%>
    <tr>
    <td><img src='_img_' width=19 onclick='ctrltree(this, _k_)'></td>
    <td><img src='_img_' width=19 onclick='ctrltree(this, _k_)'></td>
    <td width=99%><a href='_val_'>_val_</td>
    </tr>
    <tr style='display:none'>
    <td background='_img_'></td>
    <td colspan=2>_child_</td>
    </tr>
    </table>
    </span>
    <script src='scripts/tree_menu.js'></script>
    <script>
    //菜单数据，每项第一列为节点所在层次，其他按模板中_val_出现的次序排列
    tree_menu_data = new Array(
      new Array(1,'?id=1',"节点1"),
      new Array(1,'?id=2',"节点2"),
      new Array(2,'?id=3',"节点3"),
      new Array(2,'?id=4',"节点4"),
      new Array(3,'?id=5',"节点5"),
      new Array(4,'?id=6',"节点6"),
      new Array(5,'?id=7',"节点7"),
      new Array(6,'?id=8',"节点8"),
      new Array(7,'?id=9',"节点9"),
      new Array(4,'?id=6',"节点6"),
      new Array(2,'?id=10',"节点10"),
      new Array(1,'?id=11',"节点11"),
      new Array(2,'?id=12',"节点12"),
      new Array(2,'?id=13',"节点13"),
      new Array(1,'?id=14',"节点14"),
      new Array(0,"") // 为简化终止判断附加的空数据项
    );
    //在服务器端生成上面这样一个数组应该是很容易的吧？！//节点图片
    nodeimg = new Array(
      'images/folderclose.gif', //父节点收缩，图标
      'images/folderopen.gif', //父节点打开，图标
      'images/file.gif', //叶节点，图标
      'images/plus.gif', //父节点收缩，T接
      'images/minus.gif', //父节点打开，T接
      'images/join.gif', //叶节点，T接
      'images/plusbottom.gif', //父节点收缩，L接
      'images/minusbottom.gif', //父节点打开，L接
      'images/joinbottom.gif', //叶节点，L接
      'images/line.gif', //连线
      'images/blank.gif', //补位
      'images/blank.gif', //补位
      'images/blank.gif' //空白
    );tree_menu(document.getElementById('menu'), 0);
    </script>
    tree_menu.js
    /**
     * 生成菜单
     **/
    function tree_menu(tag, deep) {
    if(deep == 0) {
    deep = 1; //当前节点的层次
    i = 0;
    }
    var j, m, k, t, out;
    out = '';
    for(; i < tree_menu_data.length-1; i++) {
    m = '';
    n = i;
    //检查当前节点是否为同组最后一个
    k = 3;
    for(j=i+1; j < tree_menu_data.length - 1; j++) {
    if(tree_menu_data[j][0] < deep) break;
    if(tree_menu_data[j][0] == deep) {
    k = 0;
    break;
    }
    }
    //读取模板
    t = tag.innerHTML;
    //填写用户信息
    for(j=1; j < tree_menu_data[n].length; j++)
    t = t.replace(/_val_/, tree_menu_data[n][j]);
    if(deep < tree_menu_data[i+1][0])
    ar = new Array(3+k,0,9+k);
    else
    ar = new Array(5+k,2,9+k);
    //设置控制标志
    t = t.replace(/_k_/g, k);
    //设置图片
    for(j=0;j<3;j++)
    t = t.replace(/_img_/, nodeimg[ar[j]]);
    //流程控制
    if(deep > tree_menu_data[i+1][0]) {
    out = out + t.replace(/_child_/, '');
    break;
    }
    if(deep < tree_menu_data[i+1][0]) {
    m = tree_menu(tag, tree_menu_data[++i][0]);
    t = t.replace(/_child_/, m);
    out = out + t;
    if(tree_menu_data[i+1][0] < deep) break;
    }else
    out = out + t.replace(/_child_/, '');
    }
    if(deep == 1)
    tag.innerHTML = out;
    else
    return out;
    }/**
     * 点击节点时的处理函数
     **/
    function ctrltree(el, k) {
    while(el.nodeName != 'TR')
    el = el.parentNode; //回溯到相应行
    var el1 = el.parentNode.rows[el.rowIndex + 1]; //取得子节点行
    if(el1.cells[1].childNodes[0] == undefined) return; //没有子节点则返回
    //设置状态
    if(el1.style.display == "none") {
    el1.style.display = "";
    var t = 1;
    }else {
    el1.style.display = "none";
    var t = 0;
    }
    //设置节点图片
    el.cells[1].childNodes[0].src = nodeimg[t];
    el.cells[0].childNodes[0].src = nodeimg[3+t+k];
    }
      

  6.   

    收着xuzuning(唠叨) 的代码，不错。
      

  7.   

    superdullwolf.cnzone.net
    我的比较短小。
      

  8.   

    就是每次都用不同的。
    因为每次的树需求特点都不太一样。
    最近喜欢XML+XSLT，那代码是真正的短小，连循环都没有。
    不过需要点XSLT的知识。