jquery - 绝对div停止重叠-让它们彼此相对移动

我正在构建树形图，并希望使树形图具有交互性。我想在单击时折叠一个节点，然后让其他节点移近折叠的节点，而在单击（打开）时让其他节点移开，这样它们就不会重叠。

整个树需要是交互式的，因为数据将按需加载。

有人可以给我一些提示/建议吗？

我调查了jQuery position属性

我尝试了（代码）：

<div id="svgContainer">
    <div id="el-a" class="one"></div>
    <div class="Container">
        <div id="el-b" class="tiles two"></div>
        <div id="el-c" class="tiles three"></div>
        <div id="el-d" class="tiles four"></div>
    </div>
</div>

的CSS

.one{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50px;
    left: 500px;
    background-color: #42647F;
    border-radius: 4px;
    transition: .2s;
}
.two{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 200px;
    left: 600px;
    background-color: #42647F;
    border-radius: 4px;
    transition: .2s;
    cursor: pointer;
}
.three{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 200px;
    left: 600px;
    background-color: #42647F;
    border-radius: 4px;
    transition: .2s;
    cursor: pointer;
}
.four{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 200px;
    left: 400px;
    background-color: #42647F;
    border-radius: 4px;
    transition: .2s;
    cursor: pointer;
}
.collapse{
    height: 10px;
    width:10px;
    margin-left: 45px;
}

jQuery的

  jQuery(document).ready(function() {
                $("#svgContainer").HTMLSVGconnect({
            paths: [
                { start: "#el-a", end: "#el-b"},
                { start: "#el-a", end: "#el-c"},
                { start: "#el-a", end: "#el-d"}
            ]
        });

        $(".tiles").click(function

(){
        $(this).toggleClass("collapse");
    });

        $(".two").position({
            my: "right middle",
            at: "left+25 middle",
            of: ".Container",
            collision:"none",
            using: using
        });
        $(".three").position({
            my: "center middle",
            at: "center middle",
            of: ".Container",
            using: using
        });
        $(".four").position({
            my: "left middle",
            at: "right-25 middle",
            of: ".Container",
            collision: "none",
            using: using
        });
    });

最佳答案

我认为这可能对您有帮助：jQuery UI: Accordeon

您将必须对其应用自己的样式，但是代码应该可以...