仿QQ菜单----三级菜单 _function lmyc()-优快云博客

<!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>
<link href="style2.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
var number=2;
function LMYC(obj) {
var lbmc
var treePic
    for (i=1;i<=number;i++) {
        lbmc = document.getElementById('LM' + i);
        treePic = document.getElementById('treePic'+i);
        treePic.className = 'lmenub';
        lbmc.style.display = 'none';
    }
}

function ShowFLT(i) {
    lbmc = document.getElementById('LM' + i);
    treePic = document.getElementById('treePic' + i)
    if (lbmc.style.display == 'none') {
        LMYC();
        treePic.className = 'lmenua';
        lbmc.style.display = '';
    }
    else {
        treePic.className = 'lmenub';
        lbmc.style.display = 'none';
    }

}
var n=4;
function LMYCB(obj) {
var lbmcb
var treePicb
    for (i=1;i<=n;i++) {
        lbmcb = document.getElementById('LMb' + i);
        treePicb = document.getElementById('treePicb'+i);
        treePicb.className = 'lmenud';
        lbmcb.style.display = 'none';
    }
}

function ShowFLTb(i) {
    lbmcb = document.getElementById('LMb' + i);
    treePicb = document.getElementById('treePicb' + i)
    if (lbmcb.style.display == 'none') {
        LMYCB();
        treePicb.className = 'lmenuc';
        lbmcb.style.display = '';
    }
    else {
        treePicb.className = 'lmenud';
        lbmcb.style.display = 'none';
    }

}
function checkTdBg(obj){
    var obj_td = document.getElementsByTagName('span');
    for( var int_i = 0 ; int_i < obj_td.length ; int_i ++ ){
     if( obj_td[int_i] == obj ){
      obj_td[int_i].className = 'active';
     }
     else{
      obj_td[int_i].className = '';
     }
    }
   }
</script>
<style>
a{color:#333; text-decoration:none;}
a:hover{color:#FF0033;}
body{font-family: "宋体";font-size:12px; margin:0; padding:0;}
ul{list-style-type:none; margin:0; padding:0;}
li{margin:0; padding:0;}
.leftmenu{background:#EEF2FB;height:auto;margin:0 auto; width:182px;border:1px solid #73C2FF;}
.lmenub{background:url(http://bbs.blueidea.com/attachment.php?aid=117261&k=d6565eadc3b2be5a78f560c9e7f49581&t=1240970983&noupdate=yes) no-repeat left;height:25px; line-height:25px;color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px; cursor:pointer;}
.lmenua{background:url(http://bbs.blueidea.com/attachment.php?aid=117262&k=9981f86f0f8e995aa7ff79bc5586bd81&t=1240970983&noupdate=yes) no-repeat;17px;height:25px; line-height:25px;color:#4B6486; font-size:14px; font-weight:700;text-align:left; text-indent:19px; cursor:pointer;}
.lmenuc{border-bottom:1px solid #A1B7CE; background:url(http://bbs.blueidea.com/attachment.php?aid=117260&k=bd3321ea3c1c02ff5570951500e7dc5e&t=1240970983&noupdate=yes) repeat-x left;font-size:12px;height:22px;line-height:22px;cursor:pointer; text-indent:20px; color:#222; font-weight:700;}
.lmenud{font-size:12px;height:22px;line-height:22px;background:#E5F5FF;text-indent:10px;border-top: 1px solid #fff;border-bottom: 1px solid #A9DAFF; font-weight:normal;cursor:pointer; text-indent:20px;}
.pclist{height:200px; overflow-y:scroll; background:#fff; width:164px; padding:5px 2px 5px 17px;}
.pclist li{background:url(http://bbs.blueidea.com/attachment.php?aid=117259&k=1a1e02d41c7c0fa55788ba52cdf7e05b&t=1240970983&noupdate=yes) no-repeat 0 5px;height:22px; line-height:22px; font-size:12px; padding-left:17px;}
.pclist .active{background:#FFFFCC; height:15px; border:1px solid #CEB70D; padding:1px 3px;}
</style>
</head>
<body style="background:#EEF2FB;">
<div class="leftmenu">
    <div class="lmenua" id="treePic1" onClick="javascript:ShowFLT(1)">一级菜单A</div>
<div id="LM1" >
    <div class="lmenuc" id="treePicb1" onClick="javascript:ShowFLTb(1)">文管产品</div>
        <div id="LMb1" class="pclist ">
      <ul>
     <li><span onclick='checkTdBg(this);' class="active"><a href="#">SCP1A</a></span></li>
              <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
      <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
      <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
              <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
     <li><span onclick='checkTdBg(this);'><a href="#">SCP1A</a></span></li>
   </ul>
      </div>
     <div class="lmenud" id="treePicb2" onClick="javascript:ShowFLTb(2)">未分组</div>
   <div id="LMb2" class="pclist" style="display:none;">
      <ul>
    <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
   </ul>
      </div>
</div>
   <div class="lmenub" id="treePic2" onClick="javascript:ShowFLT(2)">一级菜单B</div>
   <div id="LM2" style="display:none;">
     <div class="lmenud" id="treePicb3" onClick="javascript:ShowFLTb(3)">桌面文具</div>
    <div id="LMb3" class="pclist" style="display:none;">
      <ul>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
   </ul>
         </div>
  <div class="lmenud" id="treePicb4" onClick="javascript:ShowFLTb(4)">文管产品</div>
   <div id="LMb4" class="pclist" style="display:none;">
      <ul>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
     <li><span onclick='checkTdBg(this);'>SCP1A</span></li>
   </ul>
          </div>
   </div>

</div>
</body>
</html>