目录
css部分都用这个
ul{
list-style: none;
}
a:link,
a:visited,
a:hover,
a:active{
text-decoration:none;
}
.linkTree{
margin-left: 44px;
margin-top: -7px;
}
.linkTree a{
color:#005EBE;
}
.linkTree>li{
font-size: 18px;
line-height: 36px;
}
.linkTree>li ul{
display: none;
}
.linkTree>li>ul>li{
font-size: 14px;
line-height: 28px;
text-indent: 38px;
}
.linkTree img{
width: 13px;
height: auto;
transform: rotate(-90deg);
margin-right: 9px;
}
JQ简单二级树菜单
html部分
<ul class="linkTree">
<li ><a href="#" data-num="0">院系简介</a>
<ul>
<li><a href="#">地理位置</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
<li><a href="#" data-num="1">现任领导</a>
<ul>
<li><a href="#">地理位置</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
<li><a href="#" data-num="2">组织架构</a>
<ul>
<li><a href="#">地理位置</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
</ul>
jq部分
$(function(){
$(".linkTree>li>a").on("click",function(){
$(this).next().toggle();
});
})
JQ二级树菜单效果优化
效果
html部分
<ul class="linkTree">
<li ><a href="#" data-num="0"><img src="images/icon/linkTreeDir.png" alt=">">院系简介</a>
<ul>
<li><a href="#">地理位置</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
<li><a href="#" data-num="1"><img src="images/icon/linkTreeDir.png" alt=">">现任领导</a>
<ul>
<li><a href="#">地理位置</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
<li><a href="#" data-num="2"><img src="images/icon/linkTreeDir.png" alt=">">组织架构</a>
<ul>
<li><a href="#">地理位置</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
</ul>
JQ部分
$(function(){
var count = $(".linkTree").children('li').length;
var i=new Array(count);
for(var n=0;n<count;n++){
i[n]=1;
}
$(".linkTree>li>a").on("click",function(){
$(this).next().toggle();
var num = $(this).attr("data-num");
console.log(num);
if(i[num]==1){
$(this).find("img").css("transform","rotate("+i[num]*0+"deg)");
i[num]++;
}else{
$(this).find("img").css("transform","rotate("+i[num]*(-45)+"deg)");
i[num]=1;
}
});
})
JQ树菜单优化- -多级树
效果
html部分
<ul class="linkTree">
<li ><a href="#" data-num="0">院系简介</a>
<ul>
<li><a href="#">地理位置</a>
<ul>
<li><a href="#">地理位置</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
<li><a href="#" data-num="1">现任领导</a>
<ul>
<li><a href="#">地理位置</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
<li><a href="#" data-num="2">组织架构</a>
<ul>
<li><a href="#">地理位置</a></li>
<li><a href="#">联系方式</a></li>
<li><a href="#">人员领导</a></li>
</ul>
</li>
</ul>
JQ部分
$(function(){
$(".linkTree a").on("click",function(){
$(this).next().toggle();
});
})