<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #menu li dl {display:none;} #menu li.current dl {display:block;} </style> </head> <body> <ul id="menu"> <li> <a href="###">list style</a> <dl> <dt>标题标题1</dt> <dd>内容内容</dd> <dd>内容内容</dd> </dl> </li> <li> <a href="###">list style</a> <dl> <dt>标题标题2</dt> <dd>内容内容</dd> <dd>内容内容</dd> </dl> </li> <li> <a href="###">list style</a> <dl> <dt>标题标题3</dt> <dd>内容内容</dd> <dd>内容内容</dd> </dl> </li> </ul> <script type="text/javascript"> <!-- (function(){ var menu=document.getElementById("menu"); var menuA=menu.getElementsByTagName("a"); var menuLi=menu.getElementsByTagName("li"); for(var i=0,len=menuA.length;i<len;i++){ menuA[i].onclick=(function(i){ return function(){ for(var j=0;j<len;j++){ menuLi[j].className=""; } menuLi[i].className="current"; } })(i) } })() //--> </script> </body> </html>
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>下拉折叠菜单</title> <style type="text/css"> *{margin:0;padding:0;} li{list-style:none;} body{font-size:12px;} #dropmenu {200px;margin:10px auto;} #dropmenu li{line-height:20px;background:#f2f2f2;padding:0 0 0 10px;border-bottom:#dadada 1px soAd;} #dropmenu li.active{background:#dadada;} #dropmenu li a{color:#000; text-transform:capitalize; text-decoration:none;display:block;} #dropmenu dl{display:none; position:relative;z-index:100;} #dropmenu dt{height:20px;line-height:20px;padding:0 0 0 10px;background:#f90;} #dropmenu dd{height:20px;line-height:20px;padding:0 0 0 10px;background:#FF9} </style> </head> <body> <ul id="dropmenu"> <li><a href="javascript:void(0);">list style</a> <dl style="display:block"> <dt>二级菜单标题</dt> <dd>二级菜单内容</dd> <dd>二级菜单内容</dd> </dl> </li> <li><a href="javascript:void(0);">list style</a> <dl> <dt>二级菜单标题</dt> <dd>二级菜单内容</dd> <dd>二级菜单内容</dd> </dl> </li> <li><a href="javascript:void(0);">list style</a> <dl> <dt>二级菜单标题</dt> <dd>二级菜单内容</dd> <dd>二级菜单内容</dd> </dl> </li> <li><a href="javascript:void(0);">list style</a> <dl> <dt>二级菜单标题</dt> <dd>二级菜单内容</dd> <dd>二级菜单内容</dd> </dl> </li> <li><a href="javascript:void(0);">list style</a> <dl> <dt>二级菜单标题</dt> <dd>二级菜单内容</dd> <dd>二级菜单内容</dd> </dl> </li> <li><a href="javascript:void(0);">list style</a> <dl> <dt>二级菜单标题</dt> <dd>二级菜单内容</dd> <dd>二级菜单内容</dd> </dl> </li> <li><a href="javascript:void(0);">list style</a> <dl> <dt>二级菜单标题</dt> <dd>二级菜单内容</dd> <dd>二级菜单内容</dd> </dl> </li> </ul> <script type="text/javascript"> window.onload = function(){ var oUl = document.getElementById('dropmenu'); var oA = oUl.getElementsByTagName('a'); var oDl = oUl.getElementsByTagName('dl'); var i = j = 0; for(i=0;i<oA.length;i++){ oA[i].index = i; oA[i].onclick = function(){ for(j=0;j<oDl.length;j++){ if(oDl[this.index].style.display=="block"){ oDl[j].style.display="none"; oDl[this.index].style.display="none"; this.className =''; } else{ oDl[j].style.display="none"; oDl[this.index].style.display="block"; this.className='active'; } } } } } </script> </body> </html>