1 把如下代码复制到<head>与</head>之间 <script type="text/javascript"> var temp, temp2, cookieArray, cookieArray2, cookieCount; function initiate(){ cookieCount=0; if(document.cookie){ cookieArray=document.cookie.split(";"); cookieArray2=new Array(); for(i in cookieArray){ cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,""); } } cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array(); temp=document.getElementById("containerul"); for(var o=0;o<temp.getElementsByTagName("li").length;o++){ if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){ temp2 = document.createElement("span"); temp2.className = "symbols"; temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(sto/minus.png)":"url(sto/plus.png)"):"url(sto/plus.png)"; temp2.onclick=function(){ showhide(this.parentNode); writeCookie(); } temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild) temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none"; if(cookieArray[cookieCount]=="true"){ showhide(temp.getElementsByTagName("li")[o]); } cookieCount++; } else{ temp2 = document.createElement("span"); temp2.className = "symbols"; temp2.style.backgroundImage = "url(sto/page.png)"; temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild); } } } function showhide(el){ el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block"; el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(sto/minus.png)":"url(sto/plus.png)"; } function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie. cookieArray=new Array() for(var q=0;q<temp.getElementsByTagName("li").length;q++){ if(temp.getElementsByTagName("li")[q].childNodes.length>0){ if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){ cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block"); } } } document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString(); } </script> <style type="text/css"><!-- #containerul, #containerul ul{ text-align:left; margin:0; /* Removes browser default margins applied to the lists. */ padding:0; /* Removes browser default padding applied to the lists. */ } #containerul li{ margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */ padding:0; /* Removes browser default padding applied to the list items. */ list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */ } #containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */ float:left; width:12px; height:1em; background-position:0 50%; background-repeat:no-repeat; } --></style> 2 把如下代码复制到<body>与</body>之间 <ul id="containerul"> <li> 精彩网站 <ul> <li> <a href="http://7stk.com">网页特效集锦</a> </li> <li> <a href="http://7stk.com/tool/">网页工具库</a> </li> <li> <a href="http://7stk.com/tool/html_edit.htm">在线html编辑器</a> </li> </ul> </li> <li> 网页特效集锦 <ul> <li> <a href="http://7stk.com/">网站栏目</a> <ul> <li> <a href="http://7stk.com/background/index.htm">背景特效</a> </li> <li> <a href="http://7stk.com/moban/index.htm">整站模板</a> </li> <li> <a href="http://7stk.com/img/index.htm">图片特效</a> </li> </ul> </li> </ul> </li> </ul> <p> <script type="text/javascript"> initiate(); // This must be placed immediately after the menu in order to format it properly. </script> </p>