0
我正在构建一个树形图并考虑使树形图交互。我想在单击时折叠一个节点，并让其他节点靠近折叠的节点，并在单击（打开）时让其他节点移开，使它们不重叠。绝对div停止重叠 - 让它们相对于彼此移动
整棵树需要互动，因为数据将按需加载。
有人可以给我一些提示/建议吗？
我看着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
});
});