三级菜单测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">  
body {margin:0px;background-color: #dfe8f6;}
#Left_Nav {position:relative;z-index:1; 190px; height:auto;}
#Left_Area {178px;z-index:1;background-color:#FFFFFF; border-0px 1px 1px 1px; border-style:solid; border-color:#99bbe8; height:200px;}
.leftTree_daohang_selcet {background:url(images/left_daohang_bg_slecet.jpg);border-1px 0px;border-style:solid;border-color:#99bbe8;height:24px; line-height:24px;font-size:13px; font-weight:bold; color:#15428b; text-decoration:none;}
.leftTree_first_font,.leftTree_first_font a,.leftTree_first_font a:visited{font-size:13px; font-weight: normal; color:#15428b; text-decoration:none;}
.leftTree_first_font a:hover{font-weight: bold;}
.leftTree_sec_font,.leftTree_sec_font a,.leftTree_sec_font a:visited{line-height:24px; font-size:13px; font-weight: normal; color:#000; text-decoration:none;}
.leftTree_sec_font a:hover {font-weight: bold;}
</style>  
<script type="text/javascript"> 
/* 
 功能描述:js实现,点击一个选项显示其下属项列表,再次点击收起;其他项列表无变化 
 提示:本例状态用“+”“-”号表示,可以替换成对应的图片只要将对应的符号替换即可 
*/ 
function showList(div_id)  
{ 
 var obj = document.getElementById(div_id + "_ljf"); 
 var click_obj = document.getElementById(div_id); 
 var text = click_obj.innerHTML; 
 var imgleft=document.getElementById("left");
  
 if(obj.style.display == "none")  
 {  
  obj.style.display = "block"; 
//  click_obj.innerHTML = text.replace("+","-"); 
  imgleft.src="images/left_bottom_arrow.png";
 }  
 else  
 {  
  obj.style.display = "none"; 
//  click_obj.innerHTML = text.replace("-","+"); 
  imgleft.src="images/left_left_arrow.png";
 }  
} 
</script>  
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="padding:5px;">
<div id="Left_Nav"><div id="Left_Area">
  
<div id="pNode1" onclick="showList(this.id);" style="cursor:pointer;" class="leftTree_daohang_selcet">
<table border="0" cellspacing="0" cellpadding="0"><tr><td width="12"><img id="left" src="images/left_left_arrow.png" width="12" height="12" /></td><td>采购管理</td></tr></table>
</div>  
    <div id="pNode1_ljf" style="display:none; padding:5px 0px;">  
         <div id="pNode1_sub2" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">采购订货</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub3" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">采购入库</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub4" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">采购退货</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub5" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">采购录单</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub6" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img src="images/left_daohang_sec_select.gif" width="10" height="12" /></td>
            <td><a href="#">付款核销</a></td>
          </tr>
        </table>
        </div> 
        
        <div id="pNode1_sub7" onclick="showList(this.id);" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img id="left" src="images/left_left_arrow.png" width="12" height="12" /></td>
            <td><a href="#">采购单据列表</a></td>
          </tr>
        </table>
        </div> 
        <div id="pNode1_sub7_ljf" style="display:none;"> 
              <div id="pNode1_sub7_s1" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购订单</a></div> 
              <div id="pNode1_sub7_s2" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购入库单</a></div>             
              <div id="pNode1_sub7_s3" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购退货单</a></div>             
              <div id="pNode1_sub7_s4" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">付款单</a></div> 
         </div> 
         
        <div id="pNode1_sub8" onclick="showList(this.id);" style="padding-left:20px; cursor:pointer; line-height:24px;" class="leftTree_first_font">
         <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="12"><img id="left" src="images/left_left_arrow.png" width="12" height="12" /></td>
            <td><a href="#">采购业务查询</a></td>
          </tr>
        </table>
        </div> 
         <div id="pNode1_sub8_ljf" style="display:none;"> 
              <div id="pNode1_sub8_s1" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购结算表</a></div> 
              <div id="pNode1_sub8_s2" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购进货明细表</a></div>             
              <div id="pNode1_sub8_s3" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">采购退货明细表</a></div>             
              <div id="pNode1_sub8_s4" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">进货统计表</a></div> 
              <div id="pNode1_sub8_s5" style="padding-left:40px;" class="leftTree_sec_font">·<a href="#">应付账款余额查询</a></div>
         </div> 
    </div>  
    

</div></div>
</td></tr></table>
</body>
</html>

原文地址:https://www.cnblogs.com/kevin2013/p/1775480.html