<!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" οnclick="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" οnclick="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>