如何把以下折叠代码改为，点击刷新页面后再展开目录？？
<div id="main1" style="color:blue;width:110px; margin-bottom:2px;" onClick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'" >
+ <a href="javascript:;">分类一</a>
</div>
<div id="child1" style="display:none;margin-left: 15px; margin-bottom:2px; width:110px;">
<a href="/class.asp?id=3">- 目录1</a><br>
<a href="/class.asp?id=4">- 目录2</a><br>
<a href="/class.asp?id=2">- 目录3</a><br>
<a href="/class.asp?id=1">- 目录4</a><br>
</div>
<div id="main2" style="color:blue;width:110px; margin-bottom:2px;" onClick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" >
+ <a href="javascript:;">分类二</a>
</div>
<div id="child2" style="display:none;margin-left:15px;margin-bottom:2px;15px; width:110px;">
<a href="/class.asp?id=3">- 目录1</a><br>
<a href="/class.asp?id=4">- 目录2</a><br>
<a href="/class.asp?id=2">- 目录3</a><br>
<a href="/class.asp?id=1">- 目录4</a><br>
</div>
以上CSS代码实现目录的折叠展开，但问题是当点击了分类和分类下的目录链接后，整个页面刷新后原有的折叠状态会丢失回到目录全部收拢状态，如何在点击刷新当前页面class.asp后，保持前一回折叠展开的状态呢？？
或者提供能实现此功能的同类直立式分类折叠代码也行，谢谢。。 展开
直接在你的代码上改，做法是采用js+cookie。
代码如下：
<html>
<body onLoad="checkCookie()">
<div style="width:90px; float:left; margin-right:20px; margin-top:40px;">
<div id="main1" style="color:blue;width:110px; margin-bottom:2px;" onClick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none';myClick()" >
+ <a href="javascript:;" >分类一</a>
</div>
<div id="child1" style="display:none;margin-left: 15px; margin-bottom:2px; width:110px;">
<a href="/class.asp?id=3">- 目录1</a><br>
<a href="/class.asp?id=4">- 目录2</a><br>
<a href="/class.asp?id=2">- 目录3</a><br>
<a href="/class.asp?id=1">- 目录4</a><br>
</div>
<div id="main2" style="color:blue;width:110px; margin-bottom:2px;" onClick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none';myClick()" >
+ <a href="javascript:;" >分类二</a>
</div>
<div id="child2" style="display:none;margin-left:15px;margin-bottom:2px;15px; width:110px;">
<a href="/class.asp?id=3">- 目录1</a><br>
<a href="/class.asp?id=4">- 目录2</a><br>
<a href="/class.asp?id=2">- 目录3</a><br>
<a href="/class.asp?id=1">- 目录4</a><br>
</div>
<div id="main3" style="color:blue;width:110px; margin-bottom:2px;" onClick="document.all.child3.style.display=(document.all.child3.style.display =='none')?'':'none';myClick()" >
+ <a href="javascript:;" >分类三</a>
</div>
<div id="child3" style="display:none;margin-left:15px;margin-bottom:2px;15px; width:110px;">
<a href="/class.asp?id=3">- 目录1</a><br>
<a href="/class.asp?id=4">- 目录2</a><br>
<a href="/class.asp?id=2">- 目录3</a><br>
<a href="/class.asp?id=1">- 目录4</a><br>
</div>
</body>
</html>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function checkCookie()
{
var menu=getCookie('menu')
if (menu!=null && menu!=""){
var arr = menu.split(',');
for (var i =0; i < arr.length; i++) {
var tempArr = arr[i].split(':');
if (tempArr.length > 1) {
var curChild = document.getElementById(tempArr[0]);
curChild.style.display = tempArr[1];
}
}
}
}
function myClick() {
var child1 = document.getElementById("child1");
var child2 = document.getElementById("child2");
var child3 = document.getElementById("child3");
console.log(child3.style.display);
menu = "child1:" + child1.style.display+ "," + "child2:" + child2.style.display+ "," + "child3:" + child3.style.display;
setCookie('menu',menu,1)
}
</script>
效果图：
ps:采用cookie能实现，但如果用户的浏览器不支持cookie，或者禁用了cookie，那这个方法就不起作用了。
看你的需求和采用的是asp。除了利用js+ cookie，还有别的方案：
1，利用ajax + asp的session + cookie。
2，利用ajax + asp 缓存技术 缓存一个变量。
代码请看附件。
对于你的问题：
1，在增加分类五，复制分类四（其他分类）的对应部分代码，然后将main4改为main5，child4改为child5（包括myClick('child4')中的）
其他两个问题，你看效果就明白了。
ps：代码写得有点赶，很多地方应该可以写得更灵活。其实如果你用jquery，可以用更少的代码实现现有的效果。
