原理很简单:点击标题的时候把子目录的id传给js函数,然后js函数判断是打开还是关上子目录。
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
- <head>
- <title>三级导航菜单,三级竖向展开/收缩导航菜单-网页特效观止-网页特效代码|JsCode.CN|</title>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <style>
- *{ margin:0; padding:0;font-size:12px;}
- ul{ list-style:none;}
- .ps{margin-left:10px;display:none;}
- .f{cursor:pointer;line-height:20px; padding-left:20px; height:20px;}
- .b{cursor:pointer;line-height:20px; padding-left:20px; height:20px;}
- .menu{padding:8px 0;}
- </style>
- </head>
- <body bgcolor="#F6F6F6">
- <div class="menu">
- <div class="f" id="sa1" onclick="w('a1')">香车美女</div>
- <div class="ps" id="a1" style="display:none">
- <div id="ssa1b1" class="f" onclick="w('sa1b1')">2008北京车展车模(6164)</div>
- <ul class="ps" id="sa1b1">
- <li class="b">其他车模(1384)</li>
- <li class="b">捷豹展台车模(199)</li>
- <li class="b">力帆汽车展台车模(49)</li>
- </ul>
- <div id="ssa1b2" class="f" onclick="w('sa1b2')">2008北京车展花絮(782)</div>
- <ul class="ps" id="sa1b2">
- <li class="b">2008款LRX概念车发布现场(11)</li>
- <li class="b">PIVO 2 发布现场(7)</li>
- <li class="b">大众展台美丽风光(24)</li>
- </ul>
- </div>
- <div class="f" id="sa2" onclick="w('a2')">香车美女2</div>
- <div class="ps" id="a2" style="display:none">
- <div id="ssa2b2" class="f" onclick="w('sa2b2')" >2008北京车展车模(6164)</div>
- <ul class="ps" id="sa2b2"style="background-repeat: no-repeat;">
- <li class="b">其他车模(1384)</li>
- <li class="b">捷豹展台车模(199)</li>
- <li class="b">力帆汽车展台车模(49)</li>
- </ul>
- <div id="sfmn2b3" class="f" onclick="w('fmn2b2')">2008北京车展花絮(782)</div>
- <ul class="ps" id="fmn2b3">
- <li class="b">2008款LRX概念车发布现场(11)</li>
- <li class="b">PIVO 2 发布现场(7)</li>
- <li class="b">大众展台美丽风光(24)</li>
- </ul>
- </div>
- </div>
- <script language="javascript" type="text/javascript">
- function w(vd)
- {
- var ob=document.getElementById(vd);
- if(ob.style.display=="block" || ob.style.display=="")
- {
- ob.style.display="none";
- }
- else
- {
- ob.style.display="block";
- }
- }
- </script>
- </body>
- </html>
懒人图库网上有不少源码 http://www.lanrentuku.com/