我正在使用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脚本使它在可见和隐藏之间切换……这不是理想的,但到目前为止没有更好的了。
--编辑--它实际上并不是很好工作,似乎不是一个可行的解决方案。
你已经很接近你的解决方案了。这就是它:
.accordion-body.in { overflow:visible; }
.in
类是在打开时添加的,因此仅在打开时设置可见性。
请参阅Fiddle示例。
mg1075注意到下面的bug可以通过对上面的代码进行轻微修改来解决,如下所示:
.accordion-body.in:hover { overflow:visible; }
这基本上防止了溢出
在动画完成之前发生。它工作得很好,只是当您单击向下按钮打开下拉菜单,然后退出.accordion-body
时,它会再次裁剪下拉菜单,但直到您再次鼠标移动下拉菜单区域为止。有些人可能认为这种行为更可取。
请参阅更新代码。
另一个似乎适用于所有浏览器的解决方案:
.accordion-body[class*="in collapse"]{ overflow:visible;}