相对定位扩大div的内容并没有压低兄弟姐妹

时间:2014-07-22 19:50:33

标签: jquery html css layout expandable

对于令人困惑的标题感到抱歉!

我有一个可扩展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。然后带有文本“内部1”和“内部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");   
    }
})

2 个答案:

答案 0 :(得分:2)

在“#cont1,#cont2”中将高度设置为最小高度。这将让Div推倒其伙伴。如果你改变顶部:50px到margin-top:50px在#middle1中,显示器将很好地适应而不是开箱即用。

此外,您可以将.css()切换为slideUp()和slideDown()以获得良好的效果。如果你是jQuery的新手,Jsut会把它扔出去。

答案 1 :(得分:1)

您正在定义一个固定的高度top:50px将您的CSS更改为:FIDDLE

#cont1, #cont2 {
position: relative;
width: 746px;
min-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;   
}