php jq导航栏特效,Jquery树状导航效果

Jquery树状导航效果预览和下载，适合做分类的功能。预览效果：html>

Jquery树状导航效果

.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;}

--- - 分类管理 --- 文章分类 --- 标签分类 --- 友链分类 --- 测试分类 --- 管理分类 --- - php自学网 --- PHP --- MYSQL --- LINUX --- NGINX --- REDIS --- - 文章排行 --- 点击量 --- 阅读量 --- 点赞量 --- 浏览量 --- - 网站排行 --- php自学网 --- php自学网 --- php自学网 --- php自学网

$(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('+');

}

});

});

});

点击显示隐藏的树状导航栏分类效果。