JS之三級豎向展開/收縮導航選單
阿新 • • 發佈：2019-02-05
<!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>