abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>平级下拉菜单(手风琴)</title> <script src="http://code.j
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>平级下拉菜单(手风琴)</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
*{margin: 0;padding: 0;font-size: 14px;}
a{text-decoration: none;color: #ff6700;}
.nav{width: 250px;margin: 70px auto;border-top: 4px solid lightblue;border-bottom: 3px solid lightblue;}
.nav .one{border-bottom: 1px solid lightsalmon;border-left: 1px solid lightsalmon;
border-right: 1px solid lightsalmon;height: 40px;line-height: 40px;text-align: center;}
.two{width: 248px;border-left: 1px solid #009688;border-right: 1px solid #009688;}
.two div{height: 35p;line-height: 35px;border-bottom: 1px dotted lightsalmon;}
.two div{text-align: center;padding-left: 30px;}
.one strong{font-family: '楷体';color: gray;font-size: 13px;}
.one strong i{font-size: 18px;color: #F2D06B;}
</style>
<script>
$(document).ready(function(){
$('.two').css('display','none');
var one = $('.noe');
var two = $('.two');
$('.one').find('i').attr('class','fa fa-folder');
$('.one').each(function(i){
$(this).click(function(){
if($(two[i]).css('display') == 'none'){
$(this).find('i').attr('class','fa fa-folder-open');
$(two[i]).slideDown(300);
var num = i - 1;
$(two[num]).slideUp(300);
num = i + 1;
$(two[num]).slideUp(300);
}else{
$('.one').find('i').attr('class','fa fa-folder');
$(two[i]).slideUp(300);
}
});
});
});
</script>
</head>
<body>
<div class="nav">
<div class="parent">
<div class="one">
<strong><i class="fa fa-folder"></i> 个人中心</strong>
</div>
<div class="two">
<div><a href="#">我的信息</a></div>
<div><a href="#">系统通知</a></div>
<div><a href="#">短信</a></div>
</div>
</div>
<div class="parent">
<div class="one">
<strong><i class="fa fa-folder"></i> 课程中心</strong>
</div>
<div class="two">
<div><a href="#">我的信息</a></div>
<div><a href="#">系统通知</a></div>
<div><a href="#">短信</a></div>
</div>
</div>
<div class="parent">
<div class="one">
<strong><i class="fa fa-folder"></i> 校内讨论</strong>
</div>
<div class="two">
<div><a href="#">我的信息</a></div>
<div><a href="#">系统通知</a></div>
<div><a href="#">短信</a></div>
</div>
</div>
<div class="parent">
<div class="one">
<strong><i class="fa fa-folder"></i> 资源中心</strong>
</div>
<div class="two">
<div><a href="#">我的信息</a></div>
<div><a href="#">系统通知</a></div>
<div><a href="#">短信</a></div>
</div>
</div>
<div class="parent">
<div class="one">
<strong><i class="fa fa-folder"></i> 资源中心</strong>
</div>
<div class="two">
<div><a href="#">我的信息</a></div>
<div><a href="#">系统通知</a></div>
<div><a href="#">短信</a></div>
</div>
</div
<div class="parent">
<div class="one">
<strong><i class="fa fa-folder"></i> 资源中心</strong>
</div>
<div class="two">
<div><a href="#">我的信息</a></div>
<div><a href="#">系统通知</a></div>
<div><a href="#">短信</a></div>
</div>
</div
</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-17 10:04:08
Teacher's summary：完成的不错。学编程，先从模仿开始，继续加油。