<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多级菜单</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
.c1{
width:300px;
margin:20px auto;
}
.tree-list{
background:green;
}
.tree-list ul{
display: none;
padding-left:20px;
}
.tree-show>ul{
display: block;
}
.tree-list>span:before{
content: "+";
}
.tree-list.tree-show>span:before{
content: "-";
}
</style>
</head>
<body>
<div class="c1">
<ul>
<li class="tree-list">
<span>核心</span>
<ul>
<li>
<span>核心1</span></li>
<li><span>核心2</span></li>
<li><span>核心3</span></li>
<li><span>核心4</span></li>
<li><span>核心5</span></li>
</ul>
</li>
<li class="tree-list">
<span>档案</span>
<ul>
<li class="tree-list">
<span>档案1</span>
<ul>
<li class="tree-list"><span>档案1-1</span>
<ul>
<li>
<span>档案1-1-1</span>
</li>
<li>
<span>档案1-1-2</span>
</li>
<li>
<span>档案1-1-3</span>
</li>
</ul>
</li>
<li><span>档案1-2</span></li>
<li><span>档案1-3</span></li>
<li><span>档案1-4</span></li>
<li><span>档案1-5</span></li>
</ul>
</li>
<li><span>档案2</span></li>
<li><span>档案3</span></li>
<li><span>档案4</span></li>
<li><span>档案5</span></li>
</ul>
</li>
<li class="tree-list">
<span>资料</span>
<ul>
<li><span>资料1</span></li>
<li><span>资料2</span></li>
<li><span>资料3</span></li>
<li><span>资料4</span></li>
<li><span>资料5</span></li>
</ul>
</li>
</ul>
</div>
</body>
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
$(".tree-list>span").on("click",function(){
if($(this).parent(".tree-list").hasClass("tree-show")){
$(this).parent(".tree-list").removeClass("tree-show").find(".tree-list").removeClass("tree-show")
}else{
$(this).parent(".tree-list").addClass("tree-show")
}
})
</script>
</html>
浙公网安备 33010602011771号