.slideToggle() 导致底部 Div 的高度问题答案

【问题标题】：.slideToggle() Causes Height Issues for Bottom Div.slideToggle() 导致底部 Div 的高度问题
【发布时间】：2013-05-22 04:59:13
【问题描述】：

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

我的猜测是您需要将slideToggle() 设为一个函数并使用 if/else 语句，但似乎无法弄清楚。

请参阅 JSFiddle 的工作 example，了解我目前所拥有的。

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

【问题讨论】：

标签： jquery css show-hide slidetoggle

【解决方案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*/
}

【讨论】：

就是这样。我知道这将是一件如此简单的事情。非常感谢您的帮助！

【解决方案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;
}

【讨论】：