Twitter Bootstrap手风琴和按钮下拉溢出问题 [英] Twitter Bootstrap Accordion and button dropdown overflow issue

问题描述

我对我的网站的一部分使用Bootstrap。我将手风琴与下拉按钮混合。
当按钮在底部时，问题出现，下拉列表隐藏，因为.accordion体溢出设置为隐藏。

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

所以我做了你期望的，试图做 overflow-y：visible 。但是你可以在这里看到结果，它不工作：
（你也许可以注意到下拉是在div里面，这将创建一个滚动条在div，而不是只是显示。 / p>

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

我看到类似的问题： Twiiter Bootstrap（Button Dropdown）+ Div Fixed

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

所以问题是，我怎么才能使下拉菜单正常显示。

谢谢。

---

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

- 编辑 -

解决方案

原创意思

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

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

.in 打开，因此只有在打开时设置可见性。

查看示例小提琴。 / a>

更新可以帮助Chrome Bug

下面的bug109注释可以通过稍微改变上面的代码，像这样：

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

这本质上防止发生溢出在动画完成之前。它的效果很好，除非当您点击向下按钮打开下拉列表，然后退出 .accordion体下拉，但只有直到你鼠标悬停在下拉区域再次。有些人可能会考虑这种行为。

请参阅更新代码。 / a>

I'm using Bootstrap for a section of my website. I mix accordion with a dropdown button. The problem comes when the button is on the bottom, the drop-down is hidden since the .accordion-body overflow is set to hidden.

You can view jsfiddle here: http://jsfiddle.net/DBQU7/6/

So I did what you would expect, tried to do overflow-y:visible. But then you can see the result here, it doesn't work: (You can maybe also notice that the drop-down is inside the div, which creates a scroll bar inside the div instead of just showing up.

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

I saw this question that was similar: Twiiter Bootstrap (Button Dropdown) + Div Fixed

But it doesn't fix the problem as I mentioned above.

So the question is, how can I just make the dropdown show up normally.

Thanks.

---

The only solution I have found so far (and I would be happy to be proved wrong) was to add a CSS property that made the overflow visible when it was open and then through a JS script make it toggle between visible and hidden...not ideal, but nothing better so far.

-- Edited -- It actually doesn't work very well and doesn't seem to be a viable solution.

解决方案

Original Idea

You were very close with your solution. This is it:

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

The .in class is added when opened, and thus only sets visibility when open.

See the example fiddle.

Update That May Help with Chrome Bug

The bug mg1075 notes below can be solved by a slight change to the code above, like so:

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

This essentially prevents the overflow from occurring before the animation is complete. It works well, except that when you click your down button to open the dropdown, and then exit the .accordion-body it will crop off the dropdown again, but only until you mouseover the dropdown area again. Some might consider the behavior preferable.

See the fiddle with the update code.

这篇关于Twitter Bootstrap手风琴和按钮下拉溢出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！