提问者:小点点

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


我正在使用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脚本使它在可见和隐藏之间切换……这不是理想的,但到目前为止没有更好的了。

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


共2个答案

匿名用户

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

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

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

请参阅Fiddle示例。

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

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

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

请参阅更新代码。

匿名用户

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

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