【Javascript学习笔记】【DOM案例实战— —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;
}

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(); 
     });
 })