您的位置：首页 > Web前端 > JavaScript

【Javascript学习笔记】【DOM案例实战— —JQ简单树菜单】

2018-07-19 17:02 141 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。（github:KuanG97） https://blog.csdn.net/m0_37136491/article/details/81113805

目录

  • JQ简单二级树菜单
  • JQ二级树菜单效果优化
  • JQ二级树菜单优化关闭效果（保证打开一个其他关闭，打开流畅不突兀）
  • JQ树菜单优化- -多级树
  • 实战代码下载
  • 快捷链接

    • 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;
}
.linkTree .open img{
transform: rotate(0deg);
}

    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
=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 class="open"><a href="#" data-num="0"><img src="images/icon/linkTreeDir.png" alt=">">院系简介</a>
<ul>
<li><a href="#" class="active">地理位置</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);
var o =  $(".linkTree").children('.open').find('a').attr('data-num');
for(var n=0;n<count;n++){
if (n==o) {
i
=0;
}else{
i
=1;
}
}

$(".linkTree>li>a").on("click",function(){
// 显示关闭
$(this).parent().siblings('li').find('a').next().hide();
$(this).next().slideToggle(400);
var num = $(this).attr("data-num");
console.log(num);
if(i[num]==1){//点击打开
$(this).parent().siblings('li').removeClass('open');
$(this).parent().addClass('open');
for(var n=0;n<count;n++){
i
=1;
}
i[num]++;
}else{//点击关闭
$(this).parent().siblings('li').removeClass('open');
$(this).parent().removeClass('open');
for(var n=0;n<count;n++){
i
=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();
});
})

    实战代码下载

    github:本次实战代码下载 ClickHere 》

    快捷链接

    全部React学习笔记的目录 Click Here>>
    全部Javascript学习笔记的目录 Click Here>>
    Less学习笔记 Click Here>>
    安利一波前端开发推荐使用的工具 Click Here>>
    github各类实战练习源码下载 Click Here>>
    如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~

    阅读更多
    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航