Question

我一直在努力解决这个问题，但到目前为止还没有运气。我觉得我知道该怎么做，但似乎无法编写代码。我正在使用slideToggle()来显示/隐藏一组选项。但是，当我隐藏选项时，底部的div会改变其高度。我该怎么办才能避免这种情况发生？我希望高度保持不变。

我的猜测是你需要使slideToggle()成为一个函数并使用if / else语句，但似乎无法弄明白。

请参阅JSFiddle的工作example，了解我目前的情况。

有什么建议吗？谢谢你的帮助。

Answer 1

制作position:absolute并提供top值

Fiddle

#radio-buttons {
    width: 288px;
    height: 20px;
    font-size: 11px;
    border-right: 1px solid #BCBCBC;
    border-bottom: 1px solid #BCBCBC;
    float: left;
    background: #FFF;
    padding: 6px;
    position:absolute;
    top:35px;

}

#box-below {
    width: 300px;
    height: 200px;
    border-right: 1px solid #8D8D8D;
    border-bottom: 1px solid #8D8D8D;
    /*Removed float*/
}

Answer 2

如果在元素上使用绝对定位（如PSL建议的那样）不是一个选项，则可以修改#radio-buttons div的高度并清除#box-below div上的浮点数。

JSFiddle

CSS

#box-below {
    width: 300px;
    height: 200px;
    border-right: 1px solid #8D8D8D;
    border-bottom: 1px solid #8D8D8D;
    float: left;
    clear: both;
}


#radio-buttons {
    width: 288px;
    height: 14px;
    font-size: 11px;
    border-right: 1px solid #BCBCBC;
    border-bottom: 1px solid #BCBCBC;
    float: left;
    background: #FFF;
    padding: 3px 6px 9px;
}

.slideToggle（）导致底部Div的高度问题

2 个答案:

Fiddle