Jquery树状导航效果预览和下载，适合做分类的功能。
预览地址：http://zixuephp.net/uploads/file/20170627/1498562938456515.html
预览效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery树状导航效果</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.menulist-n{ display:block; margin-left:40px; border-left:2px solid #eee; padding-left:0px; }
.menulist-n span { color:#eee; }
.menulist-n .addline{ color:#eee; }
.menulist-n li { color:#000; }
.menulist-n li .topnames { font-size:15px; color:#323d53; font-weight:bold;}
.menulist-n span { color:#000; }
.menulist-n .adds { width:12px; height:12px; color:#000; display:inline-block; line-height:12px; text-align:center; border:1px solid #000; font-size:12px; margin-right:0px; }
.menulist-n li:hover{ color:#005580; cursor: pointer; }
.menulist-n>li { list-style: none; min-height:25px; line-height:25px; text-align:left; font-size:14px; }
.menulist-n-l{ display:block; border-left:2px solid #eee; margin-left:25px; padding-left:0px; }
.menulist-n-l>li{ list-style: none; min-height:25px; line-height:25px; text-align:left; font-size:14px; }
.mvremove:hover{color:red;}
.mvedit:hover{color:#03C4F7;}
.mvedit,.mvremove{font-size:12px;}
</style>
</head>
<body>
<table style="width:100%; margin:0 auto;" >
<tr>
<td colspan="4">
<ul class="menulist-n">
<li>
<span class="addline">---</span>
<span class="adds">-</span>
<span class="topnames">分类管理</span>
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
<ul class="menulist-n-l">
<li>
<span class="addline">---</span>
文章分类
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
标签分类
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
友链分类
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
测试分类
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
管理分类
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
</ul>
</li>
<li>
<span class="addline">---</span>
<span class="adds">-</span>
<span class="topnames">php自学网</span>
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
<ul class="menulist-n-l">
<li>
<span class="addline">---</span>
PHP
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
MYSQL
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
LINUX
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
NGINX
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
REDIS
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
</ul>
</li>
<li>
<span class="addline">---</span>
<span class="adds">-</span>
<span class="topnames">文章排行</span>
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
<ul class="menulist-n-l">
<li>
<span class="addline">---</span>
点击量
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
阅读量
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
点赞量
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
浏览量
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
</ul>
</li>
<li>
<span class="addline">---</span>
<span class="adds">-</span>
<span class="topnames">网站排行</span>
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
<ul class="menulist-n-l">
<li>
<span class="addline">---</span>
php自学网
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
php自学网
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
php自学网
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
<li>
<span class="addline">---</span>
php自学网
<span class="glyphicon glyphicon-remove mvremove"></span>
<span class="glyphicon glyphicon-edit mvedit"></span>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
//导航列表效果
$('.menulist-n>li').each(function () {
var adds = '';
$(this).children('.topnames').click(function () {
adds = $(this).siblings('.adds').text();
$(this).siblings('.adds').text('-');
$(this).siblings('.menulist-n-l').slideDown();
});
var addsdom = $(this).children('.adds');
addsdom.click(function () {
adds = addsdom.text();
if (adds == '+') {
addsdom.text('-');
addsdom.parent().children('ul').slideDown();
} else {
addsdom.parent().children('ul').slideUp();
addsdom.text('+');
}
});
});
});
</script>
</body>
</html>点击显示隐藏的树状导航栏分类效果。
