jQuery实现文档树效果
(编辑：jimmy 日期: 2025/11/5 浏览：3 次 )
情形：本类别下面有好多子类别，每个子类别下面又有好多孙类别；需求：当点击本类别时，子类别如果是显示的就让它隐藏，子类别如果是隐藏的就让它显示。
效果如下：
图（1）点击前
图（2）点击后
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.box{
width: 250px;
height: auto;
padding: 20px;
background: lightgrey;
margin:0 auto;
}
.box li{
line-height: 30px;
/*注意：height没有被设置，可以根据实际需要自动调整*/
position: relative;
}
.box li em{
position: absolute;
left:0;
top:7px;
width: 16px;
height: 16px;
background-image: url("http://www.qdfuns.com/misc.php");
background-size:100%;
cursor: pointer;
}
.box li em.open{
background-image: url("http://www.qdfuns.com/misc.php");
background-size:100%;
}
.box li span{
padding-left: 20px;
/*因为span前面的em已经绝对定位，脱离文档流了，所以span的左边界直达 li*/
}
.box ul{
display: none;
}
.two{
margin-left: 20px;
}
.three{
margin-left: 40px;
}
.four{
margin-left: 40px;
}
/*ul.box下的li显示，其中有折叠的li加em；
ul.box下的ul隐藏，其内部的li是没法显示的*/
</style>
</head>
<body>
<ul class="box">
<li><em></em><span>第一级第一个</span>
<ul class="two">
<li><span>第二级第一个</span></li>
<li><em></em><span>第二级第二个</span>
<ul class="three">
<li><em></em><span>第三级第一个</span>
<ul class="four">
<li><span>第四级第一个</span></li>
<li><span>第四级第二个</span></li>
</ul>
</li>
<li><span>第三级第二个</span></li>
</ul>
</li>
<li><em></em><span>第二级第三个</span>
<ul class="three">
<li><span>第三级第一个</span></li>
<li><span>第三级第二个</span></li>
</ul>
</li>
</ul>
</li>
<li><em></em><span>第一级第一个</span>
<ul class="two">
<li><span>第二级第一个</span></li>
<li><em></em><span>第二级第二个</span>
<ul class="three">
<li><em></em><span>第三级第一个</span>
<ul class="four">
<li><span>第四级第一个</span></li>
<li><span>第四级第二个</span></li>
</ul>
</li>
<li><span>第三级第二个</span></li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="/UploadFiles/2021-04-02/jquery-2.0.3.min.js">
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
下一篇：js以及jquery实现手风琴效果