依赖jquery需要先导入jquery
style样式
ul,
li,
i {
list-style: none;
padding: 0;
margin: 0;
font-style: normal;
}
i {
width: 14px;
height: 14px;
float: left;
}
.box {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.nav-ml {
width: 100%;
}
.nav-ml ul {
margin-left: 20px;
}
.nav-ml i {
width: 14px;
height: 14px;
background: url(images/add.png) no-repeat 0 0;
margin-right: 10px;
}
.nav-ml i.unfold {
width: 14px;
height: 14px;
background: url(images/minus.png) no-repeat 0 0;
}
.nav-ml a {
display: block;
font-size: 14px;
height: 20px;
padding: 3px 0;
color: #666;
overflow: hidden;
}
.nav-first,
.nav-second,
.nav-three {
margin-left: 20px;
}
.nav-three li {
background: url(images/dot.png) no-repeat 0 12px;
padding-left: 10px;
}
.fold {
display: none;
}
.nav-three li:hover {
background-color: #fffceb;
}html内容
<div class="nav-ml">
<ul>
<li>
<ul class="nav-first">
<li>
<a class="item-1"><i></i>文书档案</a>
<ul class="nav-second fold ">
<li>
<a class="item-2"><i></i>行政工作</a>
<ul class="nav-three fold">
<li><a>2019年行政工作行政财务报告</a></li>
<li><a>2019年行政工作行政财务报告</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="nav-first">
<li>
<a class="item-1"><i></i>会计档案</a>
<ul class="nav-second fold ">
<li>
<a class="item-2"><i></i>会计工作</a>
<ul class="nav-three fold">
<li><a>报告</a></li>
<li><a>报告</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="nav-first">
<li>
<a class="item-1"><i></i>资产档案</a>
<ul class="nav-second fold ">
<li>
<a class="item-2"><i></i>资产工作</a>
<ul class="nav-three fold">
<li><a>报告</a></li>
<li><a>报告</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="nav-first">
<li>
<a class="item-1"><i></i>文件档案</a>
<ul class="nav-second fold ">
<li>
<a class="item-2"><i></i>文件工作</a>
<ul class="nav-three fold">
<li><a>报告</a></li>
<li><a>报告</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<ul class="nav-first">
<li>
<a class="item-1"><i></i>设备档案</a>
<ul class="nav-second fold ">
<li>
<a class="item-2"><i></i>设备工作</a>
<ul class="nav-three fold">
<li><a>报告</a></li>
<li><a>报告</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
script
var tree = [
{
text: "文书档案 1",
nodes: [
{
text: "子节点 1",
nodes: [
{
text: "孙节点 1",
nodes: [
{
text: "子节点 1"
},
{
text: "子节点 2"
}
]
},
{
text: "子节点 2"
}
]
},
{
text: "子节点 2"
}
]
},
{
text: "文书档案 2"
},
{
text: "文书档案 3"
},
{
text: "文书档案 4"
},
{
text: "文书档案 5"
}
];
// 树点击事件
$(".item-1").click(function() {
$(this)
.parent()
.find(".nav-second")
.slideToggle(500);
$(this)
.children("i")
.toggleClass("unfold");
});
$(".item-2").click(function() {
$(this)
.parent()
.find(".nav-three")
.slideToggle(500);
$(this)
.children("i")
.toggleClass("unfold");
});
