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