js三级分类菜单导航

来源：互联网发布：php string length 编辑：程序博客网时间：2024/05/16 05:58

原理很简单：点击标题的时候把子目录的id传给js函数，然后js函数判断是打开还是关上子目录。

Code:

<!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/