附上结果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery点击展开收缩树形菜单</title>
<style type="text/css">
*{margin: 0;padding: 0}
body{font-size: 12px;font-family: "宋体","微软雅黑";}
ul,li{list-style: none;}
a:link,a:visited{text-decoration: none;color: #fff;}
.list{height:26px;border-bottom:solid 1px #ccc ;margin:40px auto 0 auto; background:#009966;}
.list ul {list-style:none;margin:0px;}
.list ul li{float:left; padding:0px 40px;line-height:26px; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #000; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
}
.list ul li ul{width: 100px;border:1px, solid,#ccc}
.list ul li ul li { list-style:none;margin:0px; padding:0px ; background-color:#ffff99; border-color: #ffffff}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.inactive').click(function(){
if($(this).siblings('ul').css('display')=='none'){
$(this).addClass('inactives');
$(this).siblings('ul').slideDown(100).children('li');
}else{
$(this).removeClass('inactive');
$(this).siblings('ul').slideUp(100);
}
})
});
</script>
</head>
<body>
<div class="list">
<ul class="yiji">
<li><a href="#" class="inactive active">教育教学</a>
<ul>
<li><a href="#">信息学院</a></li>
<li><a href="#">机电学院</a></li>
<li><a href="#">管理学院</a></li>
</ul>
</li>
<li><a href="#" class="inactive">组织结构</a>
<ul style="display: none">
<li><a href="#" >教务处</a></li>
<li><a href="#">科研处</a></li>
<li><a href="#">财务处</a></li>
</ul>
</li>
<li><a href="#" class="inactive">师资队伍</a>
<ul style="display: none">
<li><a href="#" class="inactive active">博导</a></li>
<li><a href="#" class="inactive active">硕导</a></li>
<li ><a href="#">教师</a></li>
</ul>
</li>
<li><a href="#" class="inactive">招生就业</a>
<ul style="display: none">
<li><a href="#" class="inactive active">招生信息</a></li>
<li><a href="#" class="inactive active">就业信息</a></li>
<li ><a href="#">继续教育</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>