甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了衡南免费建站欢迎大家使用！
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejquery的树形菜单代码 /title
style
body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #336699;}
ul,ol,li,dl,dt,dd { margin:0; padding:0; list-style-type:none;}
h1,h2,h3,form,input,iframe,span { margin:0; padding:0;}
a { color:#7FB0C8;}
a:link {color: #7FB0C8; TEXT-DECORATION: none;}
a:visited {color: #7FB0C8; TEXT-DECORATION: none;}
a:hover {color: #fff; TEXT-DECORATION: none;}
.white { color:#fff;}
.white a:link {color: #fff; TEXT-DECORATION: none;}
.white a:visited {color: #fff; TEXT-DECORATION: none;}
.white a:hover {color: #73E1F5; TEXT-DECORATION: none;}
/* 树形菜单开始 */
.close { float:right; clear:right; font-size:12px; font-weight:normal; cursor:pointer; padding-right:10px;}
.title { font-size:14px; color:#fff; margin-bottom:10px; padding-left:5px; width:290px;}
.menu { width:290px; height:330px; overflow-y:auto; overflow-x:hidden; margin-bottom:10px;}
.menu { SCROLLBAR-FACE-COLOR: #002537; SCROLLBAR-HIGHLIGHT-COLOR: #002537; SCROLLBAR-SHADOW-COLOR: #0E6893; SCROLLBAR-3DLIGHT-COLOR: #0E6893; SCROLLBAR-ARROW-COLOR: #fff; SCROLLBAR-TRACK-COLOR: #053d58;SCROLLBAR-DARKSHADOW-COLOR: #002537; SCROLLBAR-BASE-COLOR: #01152a;}
.l1 { background:#000; font-size:13px; padding:5px 0 0 30px; height:20px; margin-bottom:5px; cursor:pointer;}
.slist { margin:0 0 5px 0; display:none;}
.l2 { padding:0 0 0 35px; font-size:13px;}
.l2 a { padding:6px 0 0 5px; width:230px; height:21px; display:block;}
.currentl2 a,.l2 a:hover { background:#1E5A82; color:#fff;}
.sslist { background:#156890; width:235px; overflow:hidden; margin:0 0 5px 35px; display:none;}
.l3 a { padding:6px 0 0 5px; width:230px; height:20px; display:block;}
.currentl3 a,.l3 a:hover { color:#fff; font-weight:bold;}
/style
script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"/script
script
// 树状菜单
$(document).ready(function(){
$(".l1").toggle(function(){
$(".slist").animate({height: 'toggle', opacity: 'hide'}, "slow");
$(this).next(".slist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(".slist").animate({height: 'toggle', opacity: 'hide'}, "slow");
$(this).next(".slist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
$(".l2").toggle(function(){
$(this).next(".sslist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(this).next(".sslist").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
$(".l2").click(function(){
$(".l3").removeClass("currentl3");
$(".l2").removeClass("currentl2");
$(this).addClass("currentl2");
});
$(".l3").click(function(){
$(".l3").removeClass("currentl3");
$(this).addClass("currentl3");
});
$(".close").toggle(function(){
$(".slist").animate({height: 'toggle', opacity: 'hide'}, "fast");
$(".sslist").animate({height: 'toggle', opacity: 'hide'}, "fast");
},function(){
$(".slist").animate({height: 'toggle', opacity: 'show'}, "fast");
$(".sslist").animate({height: 'toggle', opacity: 'show'}, "fast");
});
});
/script
/head
body
h1 class="title"span class="close"全部收起/展开/span树形菜单/h1
div class="menu"
h1 class="l1"一级菜单/h1
div class="slist"
h2 class="l2"a href="javascript:function()"二级菜单/a/h2
ul class="sslist"
li class="l3"a href="javascript:function()"·三级菜单/a/li
li class="l3"a href="javascript:function()"·三级菜单/a/li
li class="l3"a href="javascript:function()"·三级菜单/a/li
li class="l3"a href="javascript:function()"·三级菜单/a/li
/ul
h2 class="l2"a href="javascript:function()"二级菜单/a/h2
ul class="sslist"
li class="l3"a href="javascript:function()"·三级菜单/a/li
li class="l3"a href="javascript:function()"·三级菜单/a/li
li class="l3"a href="javascript:function()"·三级菜单/a/li
li class="l3"a href="javascript:function()"·三级菜单/a/li
/ul
h2 class="l2"a href="javascript:function()"二级菜单/a/h2
/div
h1 class="l1"一级菜单/h1
div class="slist"
h2 class="l2"a href="javascript:function()"二级菜单/a/h2
h2 class="l2"a href="javascript:function()"二级菜单/a/h2
h2 class="l2"a href="javascript:function()"二级菜单/a/h2
/div
h1 class="l1"一级菜单/h1
div class="slist"
h2 class="l2"a href="javascript:function()"二级菜单/a/h2
h2 class="l2"a href="javascript:function()"二级菜单/a/h2
h2 class="l2"a href="javascript:function()"二级菜单/a/h2
/div
/div
/body
/html
你的问题其实很简单。
点击子菜单，子菜单的url链接，你是用的是框架还是直接跳转到另外一个页面？
如果是另外一个页面；那你用相同的菜单代码；都是一样的样式。要解决的办法就是在该页面把该该页对应的子菜单设置为选中。
如果点击子菜单载入的是框架内容。那就没这个问题了
这个应该不难吧。。你先去网上下个Dtree的目录树例子（如果找不到，我可以发个你）。在后台传一个list进来。这个list保存的对象有个属性是子节点的list。在后台处理好后，在前台用c标签遍历这个list，可以根据varstatus.index来控制tree的节点。
//缩起全部
$('.tree ul li').hide();
//展示第一个
$('.tree ul li: first').show();
大概就是这样
下次问问题建议贴代码(html.css.js)，不要放图片，没法调试。。。
在每个树菜单先加样式 display="none" ，点击的时候通过jquery控制被点击的当前样式 为display="block"
首页简单创建一个动态的树
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titleSimpleTree/title
link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/
script type="text/javascript" src="js/jquery-1.6.min.js"/script
script type="text/javascript" src="js/SimpleTree.js"/script
script type="text/javascript"
$(function(){
$(".st_tree").SimpleTree({
click:function(a){
if(!$(a).attr("hasChild"))
alert($(a).attr("ref"));
}
});
});
/script
/head
body
div class="st_tree"
ul
lia href="#" ref="hyjm"欢迎界面/a/li
lia href="#" ref="xtgl"系统管理/a/li
ul show="true"
lia href="#" ref="yhgl"用户管理/a/li
lia href="#" ref="rzck"日志查看/a/li
/ul
lia href="#" ref="ckgl"仓库管理/a/li
ul
lia href="#" ref="kcgl"库存管理/a/li
lia href="#" ref="shgl"收货管理/a/li
lia href="#" ref="fhgl"发货管理/a/li
ul
lia href="#" ref="yhgl"用户管理/a/li
lia href="#" ref="rzck"日志查看/a/li
/ul
/ul
/ul
/div
/body
/html
效果图：
提取如何 获取属性。
用户事件获取
$(function(){
$(".st_tree").SimpleTree({
click:function(a){
if(!$(a).attr("hasChild"))
alert($(a).attr("ref"));
}
});
});
2. 动态维护修改属性 这个时候需要用到each 遍列 + val值判断 设置新属性和读取
jQuery.each($(".st_tree"), function(i, val) { // i 指向键, val指定值
if(val == "xxx"){
// 你可以做读了或重新设置
}
});