准备如下:
在相对的images文件夹下放三个小图标:
open.gif、
close.gif、
dot.gif
效果如下:
效果如下:
<!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>
<title>三级竖向展开/收缩导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}
.ps {
margin-left: 10px;
display: none;
}
.open {
cursor: pointer;
background: url(images/open.gif) no-repeat;
line-height: 20px;
padding-left: 20px;
height: 20px;
}
.dot {
cursor: pointer;
background: url(images/dot.gif) no-repeat;
line-height: 20px;
padding-left: 20px;
height: 20px;
}
.content {
padding: 8px 0;
}
</style>
</head>
<body>
<div class="content">
<div class="open" id="sgc" onClick="two('gc')" style="background:url(images/close.gif) no-repeat"> <a target="FrameRight" href="#">国产</a></div>
<div class="ps" id="gc" style="display:block">
<div id="sf1" class="open" onClick="three('f1')"> <a target="FrameRight" href="#"> 比亚迪</a></div>
<div class="ps" id="f1">
<div class="dot"> <a target="FrameRight" href="#"> F3</a></div>
</div>
</div>
<div class="open" id="sjk" onClick="two('jk')"> <a target="FrameRight" href="#">进口</a></div>
<div class="ps" id="jk" style="display:none">
<div id="sf2" class="open" onClick="three('f2')"> <a target="FrameRight" href="#"> 宝马</a></div>
<div class="ps" id="f2">
<div class="dot"> <a target="FrameRight" href="#"> 宝马1系</a></div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
function two(id)
{
var object=document.getElementById(id);
if(object.style.display=="block" || object.style.display=="")
{
object.style.display="none";
var ob2=document.getElementById('s'+id);
ob2.style.backgroundImage="url(images/open.gif)";
}
else
{
object.style.display="block";
var ob2=document.getElementById('s'+id);
ob2.style.backgroundImage="url(images/close.gif)";
}
}
function three(id)
{
var object=document.getElementById(id);
if(object.style.display=="block")
{
object.style.display="none";
var ob2=document.getElementById('s'+id);
ob2.style.backgroundImage="url(images/open.gif)";
}
else
{
object.style.display="block";
var ob2=document.getElementById('s'+id);
ob2.style.backgroundImage="url(images/close.gif)";
}
}
</script>
</body>
</html>