案例记录，前端开发利用jquery实现阶梯关系图

网页制作的过程中，关系图倒是不会太经常遇到，但是如果是碰到分销或者多级代理的项目，几乎是肯定要做出来的，一开始我是完全依赖插件实现复杂的效果，但是互联网上这类插件很少，而且对于响应式页面的支持很差劲，所以还是需要想办法自己敲。一开始作出来的很简单，只通过多级嵌套和外边距缩进的方式来大概的体现用户的层级关系，但是最近深入的学习了jquery之后，也逐渐的掌握了实现简单阶梯关系图的办法。
代码不多，主要是html和css，js负责补充完善。

原理说明：

1.下级套在上级div中且有向左的内外边距，实现缩进效果。
2.虚线是设置了边框的div，采用css定位，竖线高度为100%，和外部div高度相同，但是div内最后一个子元素div中的竖线只有一半，防止超出。而横线为200，大部分被隐藏，留出部分刚好接上竖线。
3.一个用户的div高度是写死的80px，且超出部分隐藏，但是点击展开按钮后，高度变为了auto自动，所以下面的元素会直接全部出现。

html代码（仅供参考），最外面还有一个id为tx的div包住了主要代码：

<div class="group-box tb">
    <div class="hr"></div>
    <div class="wr"></div>
    <div class="group-u shadow white relative">
        <div class="g-pic left">
            <img src="img/Avatar.jpg"/>
        </div>
        <div class="g-text left">
            <h5>王麻子</h5>
            <p class="text-success">区代理</p>
        </div>
        <a href="#" class="ai add block absolute"><i class="ico">&#xe6b9;</i></a>
        <a href="#" class="ai subtract block absolute hidden"><i class="ico">&#xe6fe;</i></a>
    </div>
    
    <div class="group-box tb">
        <div class="hr"></div>
        <div class="wr"></div>
        <div class="group-u shadow white">
            <div class="g-pic left">
                <img src="img/Avatar.jpg"/>
            </div>
            <div class="g-text left">
                <h5>王麻子</h5>
                <p class="text-success">区代理</p>
            </div>
            <a href="#" class="ai add block absolute"><i class="ico">&#xe6b9;</i></a>
            <a href="#" class="ai subtract block absolute hidden"><i class="ico">&#xe6fe;</i></a>
        </div>
        
        <div class="group-box tb">
            <div class="hr"></div>
            <div class="wr"></div>
            <div class="group-u shadow white">
                <div class="g-pic left">
                    <img src="img/Avatar.jpg"/>
                </div>
                <div class="g-text left">
                    <h5>王麻子</h5>
                    <p class="text-success">区代理</p>
                </div>
                <a href="#" class="ai add block absolute"><i class="ico">&#xe6b9;</i></a>
                <a href="#" class="ai subtract block absolute hidden"><i class="ico">&#xe6fe;</i></a>
            </div>
            
            <div class="group-box tb">
                <div class="hr"></div>
                <div class="wr"></div>
                <div class="group-u shadow white">
                    <div class="g-pic left">
                        <img src="img/Avatar.jpg"/>
                    </div>
                    <div class="g-text left">
                        <h5>王麻子</h5>
                        <p class="text-success">区代理</p>
                    </div>
                </div>
                
                
            </div>
            
        </div>
        
    </div>
    <div class="group-box tb">
        <div class="hr"></div>
        <div class="wr"></div>
        <div class="group-u shadow white">
            <div class="g-pic left">
                <img src="img/Avatar.jpg"/>
            </div>
            <div class="g-text left">
                <h5>王麻子</h5>
                <p class="text-success">区代理</p>
            </div>
            <a href="#" class="ai add block absolute"><i class="ico">&#xe6b9;</i></a>
            <a href="#" class="ai subtract block absolute hidden"><i class="ico">&#xe6fe;</i></a>
        </div>
        
        <div class="group-box tb">
            <div class="hr"></div>
            <div class="wr"></div>
            <div class="group-u shadow white">
                <div class="g-pic left">
                    <img src="img/Avatar.jpg"/>
                </div>
                <div class="g-text left">
                    <h5>王麻子</h5>
                    <p class="text-success">区代理</p>
                </div>
            </div>
            
            
        </div>
        
    </div>
</div>

很简单，就是子级写在父级里面，不断嵌套下去，而且子级写相对定位，控制内部元素的位置，我精简了css，所以出现许多共用的class。但是基本元素还是有的，比如横线对应div，竖线对应div，用户主体div，还包括两个a标签按钮。

CSS代码如下：

/*共用class*/
.left{float:left;}
.tb{padding-top:5px;
padding-bottom:5px;}
.white{background:#fff;}
.shadow{-webkit-box-shadow:0 1px 5px rgba(0,0,0,.2);
box-shadow:0 1px 5px rgba(0,0,0,.2);}
.absolute{position:absolute;}
.relative{position:relative;}
.text-success{color:#12a052;}
/*主要定义*/
.group-box{height:80px;
width:100%;
padding-left:10px;
position:relative}
.group-box .group-box{margin-left:20px;
padding-left:20px;}
.group-box .group-box .wr{height:100%;
width:2px;
position:absolute;
left:0px;
top:0px;
border-left:solid 1px #ccc}
.group-box .group-box .hr{width:100px;
height:2px;
position:absolute;
left:0px;
top:39px;
z-index:1;
border-top:solid 1px #ccc;}
.group-box .group-box .group-u{z-index:10;
position:relative}
.group-u{width:200px;
height:70px;
margin-bottom:10px;}
.g-pic{width:70px;}
.g-pic img{width:50px;
height:50px;
margin:10px;
border-radius:50%;}
.g-text h5{margin-top:15px;}
.group-u .ai{width:30px;
height:30px;
font-size:20px;
font-weight:bold;
line-height:30px;
text-align:center;
right:10px;
top:18px;}
.group-box .last .wr{height:40px !important;}

CSS实现了对元素的定位和样式的定义，比如竖线横线的宽度，高度，位置等等，最终的效果是如下图，展示无法展开，下级元素被隐藏。

然后，虽然不多，但是最重要的js代码（需要引入jquery，原生太难写了）：

$(function(){
    $(".add").click(function() {
        $(this).addClass("hidden");
        $(this).next().removeClass("hidden");
        $(this).closest('.group-box').css("height","auto");
    });
    $(".subtract").click(function() {
    $(this).addClass("hidden");
        $(this).prev().removeClass("hidden");
        $(this).closest('.group-box').css("height","80px");    
    });
    //group-box下如果有同名的子元素，也就是父元素下存在子元素，则给最后一位添加last这个类，让右侧竖线的高度变为原本的一半，防止超出。
    $(".group-box").children(".group-box:last-child").addClass("last");
    //如果是第一级的group-box，竖线隐藏掉。
    $("#tx").children(".group-box").children(".wr").hide();
});

这段js首先实现了通过右侧按钮控制高度的变化，也就是子元素的隐藏显示，然后再开始对线条进行完善，从而完美的实现了梯形图。

本文来自投稿，不代表本站立场，如若转载，请注明出处：https://www.ruletree.club/archives/1119/

案例记录，前端开发利用jquery实现阶梯关系图

相关推荐

jquery定时执行setInterval方法，手动开启和暂停

jquery常用正则验证，以及基础用法

网站利用cookies实现切换语言，案例整理

案例记录，列表商品数量增减和价格实时统计

发表评论

作者信息

热门文章

标签TAG

# typecho

# 杰奇cms

# 杰奇2.2

# 杰奇

# 科幻

# jquery

# 外部投稿

# 二次开发

# 杰奇2.4

# 精选

# 挖矿

# 杰奇2.3

# uniapp

# 诗歌

热评文章

最近回复

关于永久拉黑“帮帮乐”，并解除其Pro授权的通知

无需外国人身份，开通美国或香港信用卡，订阅chatgpt或绑定支付宝微信

2020最新狗狗币挖矿教程，全网最详细

关于永久拉黑“帮帮乐”，并解除其Pro授权的通知