本文實例講述了JS實現(xiàn)的豎向折疊菜單代碼。分享給大家供大家參考，具體如下：
先來看看運行效果截圖：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-hxzd-menu-demo/
具體代碼如下：
<!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><script language = JavaScript>function showmenu(id) { var list = document.getElementById("list"+id); var menu = document.getElementById("menu"+id) if (list.style.display=="none") { document.getElementById("list"+id).style.display="block"; menu.className = "title1"; }else { document.getElementById("list"+id).style.display="none"; menu.className = "title"; }} </script><style type="text/css"><!--*{margin:0;padding:0;list-style:none;font-size:14px}#nav{margin:10px;text-align:center;line-height:25px;width:200px;}.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}--></style></head><body><div id="nav"> <div class="title" id="menu1" onclick="showmenu('1') ">Ajax下載</div> <div id="list1" class="content" style="display:none"> <ul> <li>jQuery</li> <li>Extjs</li> <li>Mootools</li> </ul> </div> <div class="title" id="menu2" onclick="showmenu('2')">網(wǎng)頁代碼</div> <div id="list2" class="content" style="display:none"> <ul> <li>菜單導航</li> <li>層和布局</li> <li>圖片切換</li> </ul> </div> </div></body></html>希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
