<!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>
分享到：
相关推荐
"jQuery手机端无限级导航下拉菜单代码"就是一个解决此类问题的方案，它允许用户在一个简洁的界面下访问多级菜单，而无需展开多个屏幕。本文将详细介绍这个代码实现的关键技术和原理。 首先，jQuery是一个广泛使用的...
本文将深入探讨“简单实用网站帮助说明问答左侧导航菜单代码”的相关知识点，旨在帮助开发者创建高效、易用的网页界面。 首先，我们要理解导航菜单的基本构成。一个典型的左侧导航菜单通常包含一系列链接，这些链接...
这个"js固定区块右键弹出菜单代码.zip"压缩包包含了一个实现此类功能的代码示例。在这个项目中，开发者可以学习如何利用JavaScript来监听鼠标事件，特别是在固定区块上触发右键点击时，展示一个自定义的菜单。 首先...
微信公众平台开发菜单代码，对微信接口开发菜单建立， 自定义菜单的实现代码
本资源是一个专门针对手机导航的下拉菜单代码，适用于那些希望在移动设备上提供良好用户体验的开发者。 Bootstrap是一个流行的开源前端框架，由Twitter开发，它包括CSS样式表、JavaScript插件和HTML组件，旨在简化...
7. **压缩包中的vb打造自己喜欢的菜单代码.exe**：这个文件很可能是一个已经编译的VB应用程序，演示了如何使用图片框和自定义颜色创建菜单。运行这个程序，你可以观察并学习其具体实现，了解实际效果和代码之间的...
在IT行业中，京东商城作为国内知名的电子商务平台，其前端界面的构建无疑是非常关键的一部分，而“京东商城菜单代码”正是这个构建过程中的重要组件。菜单是用户与网站交互的首要入口，它通常包含了商品分类、服务...
在这个"非常小巧的JS下拉菜单代码"项目中，我们可以看到一个简洁而实用的下拉菜单解决方案。 首先，我们要理解JS（JavaScript）是Web开发中的脚本语言，主要用于处理客户端的交互。jQuery则是一个基于JS的库，简化...
在IT领域，特别是网页开发中，树形菜单代码是一种常用的技术，用于构建具有层次结构的导航系统。"各种语言脚本的树形菜单代码大全"这个资源包集合了多种编程语言和方法来创建这种功能，包括CSS（层叠样式表）、...
**jQuery树型多级手风琴菜单代码详解** 在网页设计和开发中，为了提高用户体验和界面的可操作性，常常会使用到各种交互效果，其中树型多级手风琴菜单是一种常见的导航元素。本篇文章将深入解析一款基于jQuery实现的...
这个“可折叠树形菜单代码（带搜索功能）”是为了解决这一需求而设计的，它结合了jQuery库的便利性和搜索功能的实用性，为用户提供了一种高效、直观的方式来浏览和查找复杂的数据结构。 首先，我们来看看核心组件...
本篇将详细讲解"漂亮的CSS3弹性导航下拉菜单代码"所涉及的知识点。 首先，CSS3中的Flexbox（弹性盒布局）是创建这种弹性菜单的基础。Flexbox允许我们轻松地处理元素的对齐、分布和大小调整，无论元素数量或屏幕尺寸...
"jQuery左侧固定多级导航下拉菜单代码"是一款专为此目的设计的解决方案，它结合了美观与实用性，适用于多种类型的网站。以下是这个项目的详细知识点： 1. **jQuery库**：jQuery 是一个广泛使用的 JavaScript 库，...
【标题】：“后台管理系统菜单 左侧折叠菜单代码”是一个针对后台管理系统的界面设计资源，主要包含实现左侧折叠菜单的代码。这样的菜单设计是后台管理界面中常见的元素，旨在提高用户体验，通过折叠的方式节省空间...
网页菜单生成器是一种工具，主要用于帮助开发者快速、高效地创建和自动生成用于网站的导航菜单代码。这种工具通常提供可视化界面，使得用户无需深入理解HTML、CSS或JavaScript等编程语言，也能轻松构建出功能完善的...
【jQuery仿天猫分类菜单代码】是一个基于JavaScript库jQuery实现的网页导航菜单，它旨在复刻天猫商城首页的分类导航栏的交互效果。这个代码适用于那些希望在自己的网站上添加类似天猫商城导航菜单的开发者，以提供...
《jQuery CSS3弹性工具栏菜单代码详解》 在网页设计中，交互性和用户体验是至关重要的因素，而一款优秀的工具栏菜单能极大地提升网站的吸引力。本文将深入解析"jQuery CSS3弹性工具栏菜单代码"这一资源，探讨其背后...
"js自适应左侧下拉菜单代码.zip" 提供了实现这一功能的完整资源，包括HTML、CSS和JavaScript代码。以下是对这些文件及其相关知识点的详细解释： 1. **HTML 结构**： 文件 `index.html` 是网站的基础结构，它定义了...
《jQuery带音效圆形右键菜单代码》是一个创新的JavaScript插件，专为网页开发者设计，旨在提升用户体验，尤其在游戏或互动应用中。这款插件借鉴了Key社游戏的风格，将传统的右键菜单转化为一种独特且引人入胜的形式...
本项目名为 "jquery下拉竖导航菜单代码"，旨在提供一个易于定制的下拉竖向导航菜单模板。 该代码的核心是利用 jQuery JavaScript 库来实现动态效果，如鼠标悬停时的显示和隐藏下拉菜单。jQuery 是一款广泛使用的 ...