tree型树伸缩收展 jsp js代码

最新推荐文章于 2021-07-30 09:20:22 发布

原创最新推荐文章于 2021-07-30 09:20:22 发布 · 854 阅读

0 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

3 篇文章

订阅专栏

这是一个使用jQuery实现的多级下拉菜单树的示例，通过点击链接可以展开和收起子菜单，提供了良好的用户体验。示例中包含了CSS样式、JavaScript代码和HTML结构，适用于网页导航菜单的构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery多级下拉菜单</title>
<script language="javascript" type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
ul, li { list-style:none; font-size:12px; line-height:20px; width:150px; margin:0; padding-left:6px; }
.child { display:none; }
.nav a { display:block; color:#5c84c1; padding-left:22px; text-decoration:none;}
ul li{
font-size:18px;
}
ul li ul li{
font-size:14px;
}
ul li ul li ul li{
font-size:10px;
}
</style>
<script language="javascript" type="text/javascript">
//说明所有的元素以ul li ul li ul li的循环格式嵌套如果没有下级分类就用li a结束嵌套
$(document).ready(function(){
//$(".nav ul li").children("ul").hide();
$(".parent").find("a").click(function(){
$(this).parent("li").parent("ul").siblings("ul").children("li").children("ul").slideUp("normal");
});
$(".nav").find("li").not(":has(ul)").children("a").css({textDecoration:"none",color:"#333",background:"none"})
.click(function(){
$(this).get(0).location.href="'"+$(this).attr("href")+"'";
});
$(".nav").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"})
.click(function(){

if($(this).next("ul").is(":hidden")){
$(this).next("ul").slideDown("slow");
if($(this).parent("li").siblings("li").children("ul").is(":visible")){
$(this).parent("li").siblings("li").find("ul").slideUp("1000");
$(this).parent("li").siblings("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"})
.end().find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"});}
$(this).css({background:"url(images/statu_open.gif) no-repeat left top;"});
return false;
}else{
$(this).next("ul").slideUp("normal");
//不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏
$(this).css({background:"url(images/statu_close.gif) no-repeat left top;"});
$(this).next("ul").children("li").find("ul").fadeOut("normal");
$(this).next("ul").find("li:has(ul)").children("a").css({background:"url(images/statu_close.gif) no-repeat left top;"});
return false;
}
});
});
</script>
</head>
<body>
<div class="paneTabContainerDocked" title="系统功能区" style="width:21px">
<span class="paneTabText" style="line-height: 1;">
系
<br>
统
<br>
功
<br>
能
<br>
区
</span>
</div>
<img class="slideHeaderIcon" alt="Undock" src="/RadControls/Splitter/Skins/Telerik/Img/undock.gif" style=""/>
<div class="nav">
<ul class="parent">
<li> <a href="#">信息规划</a>
<ul class="child">
<li> <a href="#">信息分类规划</a> </li>
</ul>
</li>
</ul>
<ul class="parent">
<li> <a href="#">信息管理</a>
<ul class="child">
<li> <a href="#">信息资源管理</a>
<ul class="child">
<li><a href="">本地自建万方资源</a></li>
<li><a href="">关系数据库资源</a></li>
<li><a href="">虚拟资源</a></li>
</ul>
</li>
<li> <a href="#">信息专题管理</a> </li>
</ul>
</li>
</ul>
<ul class="parent">
<li> <a href="#">信息服务管理</a>
<ul class="child">
<li> <a href="#">科技查新</a>
<ul class="child">
<li><a href="">未处理查询</a></li>
<li><a href="">任务已派发</a></li>
<li><a href="">协商修改</a></li>
<li><a href="">等待扣费</a></li>
<li><a href="">正在受理</a></li>
<li><a href="">等待审核</a></li>
<li><a href="">受理完毕</a></li>
<li><a href="">中止受理</a></li>
<li><a href="">任务退回</a></li>
<li><a href="">被撤销订单</a></li>
<li><a href="">查新搜索</a></li>
<li><a href="">操作日志查询</a></li>
<li><a href=""></a></li>
</ul>
</li>
<li> <a href="#">科技评估</a>
<ul class="child">
<li><a href="">订单查询</a></li>
<li><a href="">订单过程中</a></li>
<li><a href="">已处理订单</a></li>
<li><a href="">订单处理失败</a></li>
</ul>
</li>
<li> <a href="#">参考咨询</a>
<ul class="child">
<li><a href="">问题管理</a></li>
</ul>
</li>
<li> <a href="#">收录引证</a>
<ul class="child">
<li><a href="">未处理查询</a></li>
<li><a href="">协商修改</a></li>
<li><a href="">正在受理</a></li>
<li><a href="">受理完毕</a></li>
<li><a href="">中止受理</a></li>
<li><a href="">已撤销</a></li>
<li><a href="">操作日志查询</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="parent">
<li> <a href="#">用户权限管理</a>
<ul class="child">
<li> <a href="#">用户管理</a>
<ul class="child">
<li><a href="<%=request.getContextPath() %>/user/page" target="buttomFrame">用户信息管理</a></li>
<li><a href="<%=request.getContextPath() %>/role/roleInfo" target="buttomFrame">角色管理</a></li>
<li><a href="<%=request.getContextPath() %>/group/groupInfo" target="buttomFrame">用户组(服务站)管理</a></li>
</ul>
</li>
<li> <a href="#">权限管理</a>
<ul class="child">
<li><a href="<%=request.getContextPath() %>/admin/permissions/business" target="buttomFrame">业务操作权限管理</a></li>
<li><a href="<%=request.getContextPath() %>/admin/permissions/accResources" target="buttomFrame">资源访问权限管理</a></li>
<li><a href="<%=request.getContextPath() %>/admin/permissions/ipManage" target="buttomFrame">IP地址管理</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="parent">
<li> <a href="#">系统管理</a>
<ul class="child">
<li> <a href="#">数字字典管理</a>
<ul class="child">
<li><a href="">字段分段管理</a></li>
<li><a href="">同义词表管理</a></li>
</ul>
</li>
<li> <a href="#">系统邮件管理</a>
<ul class="child">
<li><a href="">服务邮件配置</a></li>
<li><a href="">系统服务邮件设定</a></li>
<li><a href="">系统邮件日志</a></li>
</ul>
</li>
<li> <a href="#">服务资源配置</a>
<ul class="child">
<li><a href="">服务资源配置</a></li>
</ul>
</li>
<li> <a href="#">任务管理</a>
<ul class="child">
<li><a href="">任务调度管理</a></li>
</ul>
</li>
<li> <a href="#">资源元数据管理</a>
<ul class="child">
<li><a href="">元数据类型管理</a></li>
<li><a href="">元数据管理</a></li>
</ul>
</li>
<li> <a href="#">邮件服务器管理</a> </li>
</ul>
</li>
</ul>
<ul class="parent">
<li> <a href="#">计费管理</a>
<ul class="child">
<li> <a href="#">计费用户管理</a> </li>
<li> <a href="#">商品管理</a> </li>
<li> <a href="#">订单管理</a>
<ul class="child">
<li><a href="">处理订单</a></li>
<li><a href="">本地PDF文章查询</a></li>
<li><a href="">服务站订单管理</a></li>
</ul>
</li>
<li> <a href="#">机构管理</a> </li>
<li> <a href="#">计费统计</a>
<ul class="child">
<li><a href="">用户计费统计</a></li>
<li><a href="">机构计费统计</a></li>
</ul>
</li>
<li> <a href="#">计费参数管理</a>
<ul class="child">
<li><a href="">统一折扣管理</a></li>
<li><a href="">不计费规则管理</a></li>
</ul>
</li>
<li> <a href="#">服务站账户管理</a> </li>
<li> <a href="#">充值卡</a>
<ul class="child">
<li><a href="">充值卡生成</a></li>
<li><a href="">充值卡查询</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="parent">
<li> <a href="#">统计信息</a>
<ul class="child">
<li> <a href="#">用户信息统计</a>
<ul class="child">
<li><a href="">用户量统计</a></li>
<li><a href="">用户分类统计</a></li>
</ul>
</li>
<li> <a href="#">文献服务总量统计</a> </li>
<li> <a href="#">原文请求</a>
<ul class="child">
<li><a href="">成功的原文请求统计</a></li>
<li><a href="">未成功的原文请求统计</a></li>
</ul>
</li>
<li> <a href="#">代查代错</a>
<ul class="child">
<li><a href="">成功的代查代错统计</a></li>
<li><a href="">未成功的代查代错统计</a></li>
</ul>
</li>
<li> <a href="#">科技查新统计</a> </li>
<li> <a href="#">收录引证统计</a> </li>
<li> <a href="#">账务使用统计</a> </li>
<li> <a href="#">资源使用统计</a> </li>
<li> <a href="#">服务站订单统计</a> </li>
<li> <a href="#">万方服务站订单统计</a> </li>
</ul>
</li>
</ul>
<ul class="parent">
<li> <a href="#">院士著作管</a>
<ul class="child">
<li> <a href="#">视频管理员</a> </li>

</ul>
</li>
</ul>
<ul class="parent">
<li> <a href="#">动态发布</a></li>
</ul>
</div>
</body>
</html>