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>
点击显示隐藏的树状导航栏分类效果。