Twitter Bootstrap 手风琴和按钮下拉菜单溢出问题

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

您可以在这里查看 jsfiddle：http://jsfiddle.net/DBQU7/6/ http://jsfiddle.net/DBQU7/6/

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

http://jsfiddle.net/DBQU7/5/ http://jsfiddle.net/DBQU7/5/

我看到这个问题很相似：Twitter Bootstrap（按钮下拉菜单）+ Div 固定 https://stackoverflow.com/questions/9780525/twiiter-bootstrap-button-dropdown-div-fixed

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

那么问题来了，怎样才能让下拉菜单正常显示呢？

Thanks.

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

-- 已编辑 -- 它实际上效果不是很好，而且似乎不是一个可行的解决方案。

创见

您非常接近您的解决方案。就是这个：

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

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

请参阅小提琴示例。 http://jsfiddle.net/DBQU7/17/

可能有助于解决 Chrome Bug 的更新

下面 mg1075 指出的错误可以通过对上面的代码稍加修改来解决，如下所示：

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

这基本上可以防止overflow在动画完成之前发生。它工作得很好，除了当您单击向下按钮打开下拉菜单，然后exit the .accordion-body它会再次裁剪掉下拉菜单，但前提是您再次将鼠标悬停在下拉区域上。有些人可能认为这种行为更可取。

请参阅更新代码的小提琴。 http://jsfiddle.net/DBQU7/21/