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

Question

我正在构建一个树形图，并希望使树形图具有交互性。我想在单击时折叠一个节点并让其他节点靠近折叠的节点，并在单击（打开）时让其他节点移开，以免它们重叠。

整个树需要交互，因为数据会按需加载。

谁能给我一些提示/建议？

我查看了 jQuery 的位置属性

我试过了（代码）：

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

Answer 1

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

您必须对其应用自己的样式，但代码应该没问题...