【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; }
.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;n1;
    }
    $(".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;nif (n==o) {
            i[n]=0;
        }else{
            i[n]=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;n1;
            }
            i[num]++;
        }else{//点击关闭
            $(this).parent().siblings('li').removeClass('open');
            $(this).parent().removeClass('open');
            for(var n=0;n1;
            }
        }
    });
})

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~