ASP动态网页设计与Ajax技术----制作折叠式菜单
Posted sihuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于ASP动态网页设计与Ajax技术----制作折叠式菜单的主要内容，如果未能解决你的问题，请参考以下文章
Ajax动态网页技术：局部更新部分网页的原理与过程（附代码）