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

您必须将自己的样式应用于它，但代码应该没问题......

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

1 个答案: