我正在构建一个树状图并研究使树状图具有交互性。我想在单击时折叠一个节点,让其他节点靠近折叠的节点,在单击(打开)时让其他节点移开,这样它们就不会重叠。
整棵树需要交互,因为数据会按需加载。
有人可以给我一些提示/建议吗?
我查看了 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
您必须对其应用自己的样式,但代码应该没问题...
关于jquery - 绝对 div 停止重叠 - 让它们相对移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43347191/