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

最新推荐文章于 2021-08-06 22:58:12 发布

欣欣__KuanG97

最新推荐文章于 2021-08-06 22:58:12 发布

阅读量466

点赞数

分类专栏：前端（js、html、css、less）

本文链接：https://blog.csdn.net/m0_37136491/article/details/81113805

版权

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>