準備如下:
在相對的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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >國産</a></div>
<div class="ps" id="gc" style="display:block">
<div id="sf1" class="open" onClick="three('f1')"> <a target="FrameRight" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" > 比亞迪</a></div>
<div class="ps" id="f1">
<div class="dot"> <a target="FrameRight" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" > F3</a></div>
</div>
</div>
<div class="open" id="sjk" onClick="two('jk')"> <a target="FrameRight" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >進口</a></div>
<div class="ps" id="jk" style="display:none">
<div id="sf2" class="open" onClick="three('f2')"> <a target="FrameRight" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" > 寶馬</a></div>
<div class="ps" id="f2">
<div class="dot"> <a target="FrameRight" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" > 寶馬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>