设计一个网页折叠菜单，如何设置它默认为关闭状态？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设计一个网页折叠菜单，如何设置它默认为关闭状态？相关的知识，希望对你有一定的参考价值。
函数代码如下：
<script>
function switchSysBar()
var locate=location.href.replace('center.html','');
var ssrc=document.all("img1").src.replace(locate,'');
if (ssrc=="images/main_41.gif")
document.all("img1").src="images/main_41_1.gif";
document.all("frmTitle").style.display="none"
else
document.all("img1").src="images/main_41.gif";
document.all("frmTitle").style.display=""
</script>
调用如下：
<td width="9" valign="middle" bgcolor="#003D79" onclick=switchSysBar()><SPAN class=navPoint
id=switchPoint title=关闭/打开左栏><img src="images/main_41.gif" name="img1" width=9 height=52 id=img1></SPAN></td>
ASP动态网页设计与Ajax技术----制作折叠式菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作折叠式菜单</title>
</head>
<style type="text/css">
ul{list-style: none; margin: 0; padding: 0;}
#accordion{width: 200px;}
#accordion li{border-bottom: 1px solid #ED9F9F;}
#accordion a{
font-size: 14px; color: #ffffff; text-decoration: none;
display: block; padding: 5px 5px 5px 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #c11136; height: 1em;
}
#accordion a:hover{background-color: #990020; color: #ffff00;}
#accordion li ul li{border-top: 1px solid #ED9F9F;}
#accordion li ul li a{
padding: 3px 3px 3px 0.5em;
border-left: 28px solid #a71f1f;
border-right: 1px solid #711515;
background-color: #e85070;
}
#accordion li ul li a:hover{
background-color: #c2425d;
color: #ffff00;
}
</style>
<body><script src="jquery-3.4.1.min.js"></script>
<script>
$(function(){
$("#accordion>li>a+*:not(:first)").hide();
$("#accordion>li>a").click(function(){
$(this).parent().parent().each(function(){
$(">li>a+*",this).slideUp();
});
$("+*",this).slideDown();
});
});
</script>
<ul id="accordion">
<li>< a href=" ">学 校 概 况</ a>
<ul>
<li>< a href="">学校介绍</ a></li>
<li>< a href="">大学章程</ a></li>
<li>< a href="">现任领导</ a></li>
<li>< a href="">历任领导</ a></li>
<li>< a href="">领导关怀</ a></li>
<li>< a href="">学校荣誉</ a></li>
</ul></li>
<li>< a href="#">机 构 设 置</ a>
<ul>
<li>< a href="">教学单位</ a></li>
<li>< a href="">党政机构</ a></li>
<li>< a href="">科研单位</ a></li>
<li>< a href="">教辅单位</ a></li>
</ul></li>
<li>< a href="#">教 育 教 学</ a>
<ul>
<li>< a href="">本科生教育</ a></li>
<li>< a href="">博士生教育</ a></li>
<li>< a href="">硕士生教育</ a></li>
<li>< a href="">预科生教育</ a></li>
<li>< a href="">继续教育与职业教育</ a></li>
<li>< a href="">留学生教育</ a></li>
<li>< a href="">教学团队与特色专业</ a></li>
</ul></li>
<li>< a href="#">民 大 文 化</ a>
<ul>
<li>< a href="">民大精神</ a></li>
<li>< a href="">办学理念</ a></li>
<li>< a href="">民大校训</ a></li>
<li>< a href="">学校标识</ a></li>
<li>< a href="">印象民大</ a></li>
<li>< a href="">印象民大</ a></li>
<li>< a href="">民大先贤</ a></li>
<li>< a href="">和谐校园</ a></li>
</ul></li>
</ul>
</body></center>
以上是关于设计一个网页折叠菜单，如何设置它默认为关闭状态？的主要内容，如果未能解决你的问题，请参考以下文章