把左边的导航中的节点转成树结构求源码有demo的直接给分

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleTree</title>
<link rel="stylesheet" type="text/css" href="/Styles/SimpleTree.css"/>
<script type="text/javascript" src="/Scripts/jquery-1.6.js"></script>
<script type="text/javascript" src="/Scripts/SimpleTree.js"></script>
<script type="text/javascript">
    $(function () {
        $(".st_tree").SimpleTree({
            click: function (a) {
                if (!$(a).attr("hasChild"))
                    alert($(a).attr("href"));
            }
        });        $(".menu1").each(function () {
            $(this).bind('click', function (event) {
                if ($(event.target).hasClass("title")) {
                    var $this = $(this);
                    var $span = $this.find(".title");
                    var $st_tree = $this.find(".st_tree");
                    if ($span.hasClass("selected")) {
                        $span.toggleClass("selected")
                        $span.toggleClass("unSelected")
                        $st_tree.css("display", "none")
                    }
                    else {
                        $(".menu1 .title").removeClass("selected");
                        $(".menu1 .title").addClass("unSelected");
                        $(".menu1 .st_tree").css("display", "none");
                        $span.toggleClass("unSelected")
                        $span.toggleClass("selected");
                        $st_tree.css("display", "");
                    }
                }            });
        });        $('li.button a').click(function (e) {
            var dropDown = $(this).parent().next();
            $('.dropdown').not(dropDown).slideUp('slow');
            dropDown.slideToggle('slow');
            e.preventDefault();
        });        $('li.dropdown a').click(function (e) {

            alert($(this).attr("href"));
        });    });</script>
<style type="text/css">
  .selected{background-image:url("/Images/nav.jpg");}
  .unSelected{background-image:url("/Images/nav.jpg");}
  .title{cursor:pointer; text-align:center;
         vertical-align:middle; background-color:ButtonFace;
         line-height:24px;
         width:180px;height:24px;
         margin:3px 0px 3px 0;
         }
</style>
</head>
<body>
<div style="width:210px;">
<div class="menu1">
   <div class="title unSelected">系统管理</div>
   <div class="st_tree" style="display:none;">
   <ul>
<li><a href="#" ref="hyjm">欢迎界面</a></li>
<li><a href="#" ref="xtgl">系统管理</a></li>
        <ul>
<li><a href="#" ref="yhgl">用户管理</a></li>
<li><a href="#" ref="rzck">日志查看</a></li>
</ul>
<li><a href="#" ref="ckgl">仓库管理</a></li>
        <ul>
<li><a href="#" ref="kcgl">库存管理</a></li>
<li><a href="#" ref="shgl">收货管理</a></li>
<li><a href="#" ref="fhgl">发货管理</a></li>
           <ul>
               <li><a href="#" ref="yhgl">用户管理</a></li>
               <li><a href="#" ref="rzck">日志查看</a></li>
           </ul>
       </ul>
   </ul>   </div>
</div>
<div class="menu1">
   <div class="title unSelected">系统管理</div>
   <div class="st_tree" style="display:none;">
   <ul>
<li><a href="#" ref="hyjm">欢迎界面</a></li>
<li><a href="#" ref="xtgl">系统管理</a></li>
        <ul>
<li><a href="#" ref="yhgl">用户管理</a></li>
<li><a href="#" ref="rzck">日志查看</a></li>
</ul>
<li><a href="#" ref="ckgl">仓库管理</a></li>
        <ul>
<li><a href="#" ref="kcgl">库存管理</a></li>
<li><a href="#" ref="shgl">收货管理</a></li>
<li><a href="#" ref="fhgl">发货管理</a></li>
           <ul>
               <li><a href="#" ref="yhgl">用户管理</a></li>
               <li><a href="#" ref="rzck">日志查看</a></li>
           </ul>
       </ul>
   </ul>   </div>
</div></div>
</body>
</html>

SimpleTree.css
@charset "utf-8";/*
Author：张浩华
Date：2011.11.25 0:12
Version：SimpleTree 1.0
*/.st_tree{
padding:10px;
}/* 超链接 */
.st_tree a{
color:#222;
text-decoration:none;
}/* 鼠标经过的超链接 */
.st_tree a:hover{
color:#f33;
text-decoration:underline;
}/* 菜单 */
.st_tree ul{
padding:0 0 0 18px;
margin:0;
}/* 菜单项 */
.st_tree ul li{
font-size:13px;
color:#222;
line-height:18px;
cursor:pointer;
list-style:none;
background:url(/Images/st_node1.jpg);
background-repeat:no-repeat;
padding:0 0 3px 20px;
}/* 子菜单 */
.st_tree ul li ul{}/* 子菜单项 */
.st_tree ul li ul li{}/* 子菜单的父节点 */
.st_tree .folder{
list-style-image:url(/Images/st_icon.png);
background:url(/Images/st_folder.gif);
background-repeat:no-repeat;
padding:0 0 0 20px;
}/* 展开的父节点 */
.st_tree .open{
list-style-image:url(/Images/st_icon_open.png);
background:url(/Images/st_folder_open.gif);
background-repeat:no-repeat;
padding:0 0 0 20px;
}.st_tree .hover{
}
li.button a
{
    display: block;
    font-family: BPreplay,Arial,Helvetica,sans-serif;
    font-size: 21px;
    height: 34px;
    overflow: hidden;
    color:Black;
    position: relative;
    width: 180px;
}li.button a:hover
{
    text-decoration: none;
}.menu2 li
{
    list-style: none;
    text-align: left;
}li.button
{
    background: url(../Images/nav-1.jpg);
    text-align:center;
    margin:0px auto;
}li.button a:hover
{
    background-position: bottom left;
}
li.button a:hover span
{
    background-position: bottom right;
}.dropdown
{
    display: none;
}.dropdown li
{
    background-color: #373128;
    border: 1px solid #40392C;
    color: #CCCCCC;
    margin: 5px 0;
    padding: 4px 18px;
} a:visited
{
    color: #0196e3;
    text-decoration: none;
    outline: none;
}a:hover
{
    text-decoration: none;
}a:link
{
    text-decoration:none;
}

SimpleTree.js
/*
Author：张浩华
Date：2011.11.27 0:33
Version：SimpleTree 1.1
*/$(function(){
$.fn.extend({
SimpleTree:function(options){

//初始化参数
var option = $.extend({
click:function(a){ }
},options);

option.tree=this; /* 在参数对象中添加对当前菜单树的引用，以便在对象中使用该菜单树 */

option._init=function(){
/*
* 初始化菜单展开状态，以及分叉节点的样式
*/
this.tree.find("ul ul").hide(); /* 隐藏所有子级菜单 */
this.tree.find("ul ul").prev("li").removeClass("open"); /* 移除所有子级菜单父节点的 open 样式 */

this.tree.find("ul ul[show='true']").show(); /* 显示 show 属性为 true 的子级菜单 */
this.tree.find("ul ul[show='true']").prev("li").addClass("open"); /* 添加 show 属性为 true 的子级菜单父节点的 open 样式 */
}/* option._init() End */

/* 设置所有超链接不响应单击事件 */
this.find("a").click(function(){ $(this).parents("li").click(); return false; });

/* 菜单项 <li> 接受单击 */
this.find("li").click(function(){
/*
* 当单击菜单项 <li>
* 1.触发用户自定义的单击事件，将该 <li> 标签中的第一个超链接做为参数传递过去
* 2.修改当前菜单项所属的子菜单的显示状态（如果等于 true 将其设置为 false，否则将其设置为 true）
* 3.重新初始化菜单
*/
var a=$(this).find("a")[0];
if(typeof(a)!="undefined")
option.click(a); /* 如果获取的超链接不是 undefined，则触发单击 */

/*
* 如果当前节点下面包含子菜单，并且其 show 属性的值为 true，则修改其 show 属性为 false
* 否则修改其 show 属性为 true
*/
if($(this).next("ul").attr("show")=="true"){
$(this).next("ul").attr("show","false");
}else{
$(this).next("ul").attr("show","true");
}

/* 初始化菜单 */
option._init();
});

this.find("li").hover(
function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);

/* 设置所有父节点样式 */
this.find("ul").prev("li").addClass("folder");

/* 设置节点“是否包含子节点”属性 */
this.find("li").find("a").attr("hasChild",false);
this.find("ul").prev("li").find("a").attr("hasChild",true);

/* 初始化菜单 */
option._init();

}/* SimpleTree Function End */

});
});

哥哥你这个和我自己做的没看出什么区别我要的是jquery-easyui-1.3.2做的听说jquery-easyui-1.3.2有控件做这个不过还是谢谢

调试易

把左边的导航中的节点转成树结构求源码有demo的直接给分

解决方案 »

把左边的导航中的节点转成树结构 求源码 有demo的直接给分

解决方案 »

把左边的导航中的节点转成树结构求源码有demo的直接给分