抱歉标题令人困惑!
我有一个可扩展 div 列表,单击该列表时,会显示一个子 div,其中包含内容。然而,我遇到的问题是,尽管父 div 和子 div 都相对定位,但展开列表中的一个 div 不会下推列表中其下方的其余 div。展开的内容仅显示在其余可展开内容的后面。
这里是简单的例子:http://jsfiddle.net/LT8h2/1/
<div id="cont1">This is an expanding div, click me!
<div id="middle1">
This is the content that should appear!
<div>Inner 1</div>
<div>Inner 2</div>
</div>
</div>
<div id="cont2"></div>
在此示例中,ID 为“cont1”和“cont2”的 div 是列表中的可扩展项。为了简单起见,我只向“cont1”提供了内容。
“middle1”代表“展开”面板,一个将占用空间来容纳内容的div。然后,文本为“inner 1”和“inner 2”的 div 就是将在展开的面板中显示的内容。
CSS 是:
#cont1, #cont2 {
position: relative;
width: 746px;
height: 50px;
margin-bottom: 5px;
text-align: left;
background-color: #f2f2f2;
}
#middle1 {
display: none;
position: relative;
height:45px;
border: 1px solid red;
width: 724px;
padding: 17px;
top:50px;
}
最后是 jQuery 在单击时展开元素:
$("#cont1").on("click",function() {
var showing = ($("#middle1").css("display") == "block");
if (showing) {
$("#middle1").css("display","none");
}
else {
$("#middle1").css("display","block");
}
})
最佳答案
将您的高度设置为“#cont1,#cont2”中的最小高度。这会让 Div 推倒它的伙伴。如果您将 #middle1 中的 top:50px 更改为 margin-top:50px,显示内容将很好地适应,而不是从盒子中流出。
此外,您可以将 .css() 切换为lideUp() 和slideDown() 以获得良好的效果。如果您是 jQuery 新手,请把它扔掉。
关于jquery - 相对定位扩展 div 的内容不会压低 sibling ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24896570/