多级树型菜单

来源：互联网发布：win8.1 mysql使用教程编辑：程序博客网时间：2024/05/17 03:12

做网页时，为了节约空间和美观，时常会用到多级的菜单，这里是一个JavaScript和Html混编的一个多级树型菜单的全部代码

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="error.jsp" %>
<html>
<head>
<title>多级树型菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript1.2">
var head="photos/display:''"
img1=new Image()
img1.src="photos/fold.gif"
img2=new Image()
img2.src="photos/open.gif"
function change(){
if(!document.all)
     return
if (event.srcElement.id=="foldheader") {
     var srcIndex = event.srcElement.sourceIndex
     var nested = document.all[srcIndex+1]
     if (nested.style.display=="none") {
        nested.style.display=''
        event.srcElement.style.liststyleImage="url(photos/open.gif)"
     }
     else {
        nested.style.display="none"
        event.srcElement.style.liststyleImage="url(photos/fold.gif)"
     }
}
}
document.onclick=change
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
   var popup = null;
   function inputorderid() {
       popup = window.open('jspInputOrderid.jsp', '请输入订单编号','width=200,height=150,resizable=0,scrollbars=no');
   }
   function account() {
       popup = window.open('jspAccountReceivable.jsp', '请选择客户名称','width=200,height=200,resizable=0,scrollbars=no');
   }
function oppaccount(){
popup = window.open('jspOppAccount.jsp', '请选择机会类型','width=200,height=200,resizable=0,scrollbars=no');
}
function accountcust(){
popup = window.open('jspAccountCust.jsp', '请选择客户地域','width=262,height=150,resizable=0,scrollbars=no');
}
function OrderAccount(){
popup = window.open('jspAccountOrder.jsp', '请选择客户及订单有效日期范围','width=200,height=200,resizable=0,scrollbars=no');

}
//-->
</script>
<style type="text/css">

li {
font-family: "宋体", "新宋体";
font-size: 9pt;
line-height: 13pt;
margin-right: 5px;
cursor: hand;
}
#foldheader{
cursor:hand;
list-style-image:url(photos/fold.gif);
font-family: "宋体", "新宋体";
font-size: 10pt;
}
#foldinglist{
list-style-image:url(photos/list.gif);
font-family: "宋体", "新宋体";
font-size: 9pt;
}
BODY {
SCROLLBAR-FACE-COLOR: #6699CC;
SCROLLBAR-HIGHLIGHT-COLOR: #A6C4E1;
SCROLLBAR-SHADOW-COLOR: #A6C4E1;
SCROLLBAR-3DLIGHT-COLOR: #A6C4E1;
SCROLLBAR-ARROW-COLOR: #A6C4E1;
SCROLLBAR-TRACK-COLOR: #A6C4E1;
SCROLLBAR-DARKSHADOW-COLOR: #A6C4E1;
}

A        { text-decoration:none; }
A:link       { text-decoration:none; color: #000066; }
A:visited    { text-decoration:none; color: #000033; }
A:hover      {
text-decoration:underline;
color: #FF0000;
}
</style>
</head>
<body bgcolor="#CBDCED" leftmargin="3" topmargin="0">
<table width="100%" height="33" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" frame="void" align="left">
<tr>
   <td>
<fieldset style="width:100%" align="left">
     <legend><a href="" target="_blank"><font size="2"> JETCRM B/S2003 </font></a></legend>
     <dl class="pt12normal">
<li id="foldheader"> 客户管理</li>
<ul id="foldinglist">
   <li id="foldheader"> 客户管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="customer_add.jsp" target="mainFrame"> 新建客户</a></li>
     <li><a href="customer_query.jsp" target="mainFrame"> 客户查询</a></li>
   <li><a href="menu.jsp#" onClick="accountcust()"> 客户统计</a></li>
   </dl>
   <li id="foldheader"> 联系人管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="contact_add.jsp" target="mainFrame" class=black> 新建联系人</a></li>
     <li><a href="contact_query.jsp" target="mainFrame" class=black> 联系人查询</a></li>
   </dl>
   <li id="foldheader"> 竞争对手管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="adversary_add.jsp" target="mainFrame" class=black> 新建竞争对手</a></li>
     <li><a href="adversary_query.jsp" target="mainFrame" class=black> 竞争对手查询</a></li>
   </dl>
</ul>
<li id="foldheader">服务管理</li>
<ul id="foldinglist" style="display:none">
<li id="foldheader">联系历史</li>
<dl id="foldinglist" style="display:none">
<li><a href="ContactHistory_add.jsp" target="mainFrame" class=black>新建联系记录</a></li>
     <li><a href="ContactHistory_list.jsp" target="mainFrame" class="balck">浏览联系记录</a></li>
   </dl>
   <li> 邮件发送</li>
   <li id="foldheader">服务请求记录</li>
   <dl id="foldinglist" style="display:none">
           <li><a href="jsprequester_add.jsp" target="mainFrame" class=black>新建服务请求</a></li>
           <li><a href="showRequesterlist.jsp" target="mainFrame" class="balck">服务请求浏览</a></li>
   </dl>
   <li id="foldheader">客户投诉</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspFeedback_add.jsp" target="mainFrame">新建投诉记录</a></li>
     <li><a href="feedback_list.jsp" target="mainFrame">投诉查询</a></li>
     <li>投诉统计</li>
   </dl>
</ul>
<li id="foldheader">销售管理</li>
<ul id="foldinglist">
   <li id="foldheader"> 机会管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspOppMan.jsp" target="mainFrame">新建机会</a></li>
     <li><a href="jspOppQuery.jsp" target="mainFrame">机会查询</a></li>
     <li><a href="menu.jsp#" onClick="oppaccount()">机会统计</a></li>
   </dl>
   <li id="foldheader">定单管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspNewOrder.jsp" target="mainFrame">新建定单</a></li>
     <li><a href="jspOrderQry.jsp" target="mainFrame">定单查询</a></li>
     <li><a href="jspFufilOrder.jsp" target="mainFrame">订单履行</a></li>
     <li><a href="jspFufilOrder.jsp" target="mainFrame">订单履行</a></li>
      <li><a href="menu.jsp#" onClick="OrderAccount">订单额统计</a></li>
     <li><a href="menu.jsp#" onClick=" inputorderid()">履行或结案</a></li>
     <li><a href="menu.jsp#" onClick=" account()">应收款统计</a></li>
   </dl>
   <li id="foldheader">报价管理</li>
   <dl id="foldinglist" style="display:none">
     <li><a href="jspQuote_add.jsp" target="mainFrame">新建报价单</a></li>
     <li><a href="jspQuote_list.jsp" target="mainFrame">浏览报价单</a></li>
   </dl>
</ul>
<li id="foldheader">系统管理</li>
<ul id="foldinglist">
   <li>权限管理</li>
     <li><a href="jspBaseDataInsert.jsp" target="mainFrame">基础数据设置</a></li>
<li><a href="jspSetEmployee.jsp" target="mainFrame">员工管理</a></li>
<li><a href="jsppurview_set.jsp" target="mainFrame">权限设置</a></li>
</ul>
       <li id="foldheader"><a href="#" target="mainFrame">重新登录</a></li>
</dl>
</fieldset>
</td>
</tr>
<tr>
   <td> </td>
</tr>
</table>
</body>
</html>