Twitter Bootstrap Accordion和按钮下拉溢出问题

Question

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

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

所以我做了你想要的,尝试做的overflow-y:visible.但是你可以在这里看到结果,它不起作用:(你也可以注意到下拉是在div里面,它在div里面创建一个滚动条而不是只显示.

但它并没有解决我上面提到的问题.

所以问题是,我怎样才能让下拉列表正常显示.

谢谢.

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

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

Answer 1

创见

你非常接近你的解决方案.就是这个:

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

在.in打开的时候类被添加,因此只设置可见性时开放.

下面的错误mg1075注释可以通过稍微更改上面的代码来解决,如下所示:

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

这基本上可以防止在overflow动画完成之前发生.它运作良好,除了当您点击向下按钮,打开下拉菜单,然后退出了.accordion-body它会再次剪切掉下拉列表中,但直到你再次鼠标悬停下拉区域.有些人可能认为这种行为更可取

Answer 2

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

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