<!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 = "" > Research Unit </ A> </ Li> Master Program </ a> </ li><li> <a href = " Doctor Education </ a> </ li><li> <a href = "Master Program </ a> </ li><li> <a href = "Doctor Education </ a> </ li><li> <a href = "<Li> <A the href = ""> Master Program </ a> </ li><li> <A href = ""> Dr. Health Education </ a> </ li> <li> <A href = ""> undergraduate Education </ A> </ li> <ul> Education </ A><Li > <a href = "#" </ UL> </ Li>
supplementary units </ A> </ Li><li> <a href = ""
<li> <a href = " "> preppy Education </ A> </ li>
<li> <a href = " "> Continuing Education and Vocational Education </ A> </ li>
<li> <A href = ""> students Education </ A> </ li>
<li> <A href = ""> teaching team and specialty </ A> </ li>
</ ul> </ li>
<li> <A href = "#"> Minda culture </ A>
<ul>
<li> <A href = ""> public spirit </ A> </ li>
<li> <A href = ""> educational philosophy < / A> </ Li>
<Li> <A the href = ""> China Colonel training </ A> </ Li>
<Li> <A the href = ""> school identification </ A> </ Li>
<Li > <a href = ""> big impression people </ A> </ li>
<li>< a href="">印象民大</ a></li>
<li>< a href="">民大先贤</ a></li>
<li>< a href="">和谐校园</ a></li>
</ul></li>
</ul>
</body></center>
ASP dynamic web design and manufacture of Ajax technology ---- accordion menu
Guess you like
Origin www.cnblogs.com/sihuan/p/12091554.html
Recommended
Ranking