Twitter引导手风琴和按钮下拉溢出问题

Question

我正在使用Bootstrap为我的网站的一个部分。我混合手风琴与下拉按钮。当按钮在底部时，问题就出现了，因为.accordion-body溢出设置为hidden后，下拉列表就隐藏了。

您可以在以下站点查看jsfiddle:http://jsfidle.net/dbqu7/6/

所以我做了您期望的事情，尝试执行overflow-y:visible。但是你可以看到这里的结果，它不起作用：（你可能还会注意到下拉在div里面，它在div里面创建了一个滚动条，而不是仅仅显示出来。

http://jsfidle.net/dbqu7/5/

我看到这个问题是类似的：Twiiter Bootstrap（按钮下拉）+Div固定

但它并不能像我上面提到的那样解决问题。

所以问题是，我如何才能让下拉菜单正常显示。

多谢了。

到目前为止，我找到的唯一解决方案（我很高兴被证明是错误的）是添加一个CSS属性，使溢出在打开时可见，然后通过一个JS脚本使它在可见和隐藏之间切换……这不是理想的，但到目前为止没有更好的了。

--编辑--它实际上并不是很好工作，似乎不是一个可行的解决方案。

Answer 1

另一个似乎适用于所有浏览器的解决方案：

.accordion-body[class*="in collapse"]{ overflow:visible;}

Answer 2

你已经很接近你的解决方案了。这就是它：

.accordion-body.in { overflow:visible; }

.in类是在打开时添加的，因此仅在打开时设置可见性。

请参阅Fiddle示例。

mg1075注意到下面的bug可以通过对上面的代码进行轻微修改来解决，如下所示：

.accordion-body.in:hover { overflow:visible; }

这基本上防止了溢出在动画完成之前发生。它工作得很好，只是当您单击向下按钮打开下拉菜单，然后退出.accordion-body时，它会再次裁剪下拉菜单，但直到您再次鼠标移动下拉菜单区域为止。有些人可能认为这种行为更可取。

请参阅更新代码。