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>
新聞熱點
疑難解答
