<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>Jquery 树形折叠菜单</title>
<link href="css/public.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<%--<script src="js/Default.js" type="text/javascript"></script>--%>
<script type="text/javascript">
var lastSrcElement;
$(function() {
$('#ul_nav li').click(function(event) {
event = event || window.event;
var srcElement = event.srcElement || event.target;
if (lastSrcElement) {
if (lastSrcElement.id == srcElement.id) {
var blockBoolean = $("#" + lastSrcElement.id + "").attr("block");
if (blockBoolean == "true") {
$("#" + lastSrcElement.id + " div").slideUp('normal', function() { });
$("#" + lastSrcElement.id + "").css("background-image", "url(images/liPlus_bg.gif)");
$("#" + lastSrcElement.id + "").attr("block", "false");
}
else {
$("#" + lastSrcElement.id + " div").css("display", "block");
$("#" + lastSrcElement.id + "").css("background-image", "url(images/liMinus_bg.gif)");
$("#" + lastSrcElement.id + "").attr("block", "true");
$('.folderBlock a:first').addClass("click");
return true;
}
}
else {
if (srcElement.tagName != 'LI') return true;
var oldBlocks = $('.folderBlock').slideUp('normal', function() {
if (oldBlocks) {
oldBlocks.remove();
}
});
var target = this;
var folder = this.id;
$.getJSON(folder + '/url.json', function(info) {
var block = $('<div></div>');
for (var n = 0; n < info.length; n++) {
block.append('<a id="a_' + n + '" href="' + folder + '/' + info[n].url + '"target="srcIframe" onclick="changeNavStyle(' + n + ')">' + info[n].caption + '</a>');
}
block
.css('display', 'none')
.addClass('folderBlock')
.appendTo(target)
.slideDown();
$("#ul_nav li").css("background-image", "url(images/liPlus_bg.gif)");
$("#" + folder + "").css("background-image", "url(images/liMinus_bg.gif)");
$("#ul_nav li").attr("block", "false");
$("#" + folder + "").attr("block", "true");
$('li:last .folderBlock').css("border-bottom", "none");
$('.folderBlock a:first').addClass("click");
})
}
}
else {
if (srcElement.tagName != 'LI') return true;
var oldBlocks = $('.folderBlock').slideUp('normal', function() { oldBlocks.remove(); });
var target = this;
var folder = this.id;
$.getJSON(folder + '/url.json', function(info) {
var block = $('<div></div>');
for (var n = 0; n < info.length; n++) {
block.append('<a id="a_' + n + '" href="' + folder + '/' + info[n].url + '"target="srcIframe" onclick="changeNavStyle(' + n + ')">' + info[n].caption + '</a>');
}
block
.css('display', 'none')
.addClass('folderBlock')
.appendTo(target)
.slideDown();
$("#ul_nav li").css("background-image", "url(images/liPlus_bg.gif)");
$("#" + folder + "").css("background-image", "url(images/liMinus_bg.gif)");
$("#ul_nav li").attr("block", "false");
$("#" + folder + "").attr("block", "true");
$('li:last .folderBlock').css("border-bottom", "none");
$('.folderBlock a:first').addClass("click");
})
}
lastSrcElement = srcElement;
});
$("#ul_nav li:nth-child(1)").click();
});
function changeNavStyle(i) {
var length = $(".folderBlock a").size();
for (var j = 0; j < length; j++) {
$("#a_" + j).removeClass("click");
}
$("#a_" + i).addClass("click");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="div_mainContent TA_left">
<div class="div_leftContent">
<div class="div_nav">
<ul class="ul_nav" id="ul_nav">
<li id="VehicleParam"><span></span>车辆参数配置</li>
<li id="4SUserManage"><span></span>4S店账户管理</li>
<li id="RebateInfo"><span></span>信息发布</li>
<li id="RightManage"><span></span>系统权限管理</li>
</ul>
</div>
</div>
<div class="div_rightContent">
<iframe name="srcIframe" frameborder="0" scrolling="no" src="VehicleParam/VehicleBaseInfo.aspx"></iframe>
</div>
<div class="clear"></div>
</div>
</form>
</body>
</html>
分享到：
相关推荐
微信公众平台开发菜单代码，对微信接口开发菜单建立， 自定义菜单的实现代码
简单实用网站帮助说明问答左侧导航菜单代码
js固定区块右键弹出菜单代码是一款点击鼠标右键弹出菜单选择效果代码。
html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码
旅游网二级导航菜单代码基于jquery.1.11.2.min.js制作，鼠标经过悬停一级导航菜单显示对应的二级菜单，二级菜单相对于一级菜单居中显示，当二级菜单内容区域超出网页左侧区域时，页面左侧区域菜单定位在最左侧，菜单...
一款简洁实用基于HTML5 Bootstrap实现的响应式手机导航下拉菜单代码，Bootstrap自适应电脑手机端导航下拉菜单网页特效。
京东商城菜单代码
vb打造自己喜欢的菜单代码,全部用图片框制作,还可以设置菜单颜色,
jQuery自定义右键弹出菜单代码是一款网页仿电脑桌面点击鼠标右键弹出下拉菜单选择代码，样式挺漂亮的。
网页菜单生成器 生成网页菜单 生成菜单代码 菜单生成 生成菜单代码 菜单自动生成
jQuery折叠树形菜单代码基于jquery.1.10.2.min.js制作，带搜索功能，搜索关键字，直接显示菜单项，展开收缩树形菜单。
这是一款简洁漂亮的CSS3弹性导航下拉菜单代码，波浪状弹性动画菜单特效，菜单项可以定义不同的颜色。
jQuery变形动画导航下拉菜单代码是一款在菜单项之间切换时，下拉菜单会根据菜单内容的大小来动态变形，平滑过渡效果非常有趣。
非常小巧的JS下拉菜单代码，只是借鉴别人的东西，呵呵。
jQuery手机端无限级导航下拉菜单代码是一款很实用的移动端多级下拉菜单代码，支持无限级子菜单展开收缩。
很好用的一个网页下拉菜单，可分级，非常小巧的JS下拉菜单代码，直接插入网相应位置，方便简单。
jquery手机触屏版HTML5页面左侧弹出导航菜单代码
jQuery仿天猫分类菜单代码是一款仿天猫商城首页的分类导航菜单切换效果。 jQuery仿天猫分类菜单代码截图
html5-css3仿微信底部固定响应式导航菜单代码
jQuery手机端导航下拉菜单代码是一款多级下拉菜单代码，支持无限级子菜单模式展开收缩代码。