CSS Twitter Bootstrap 手风琴和按钮下拉溢出问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10959068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Accordion and button dropdown overflow issue
提问by denislexic
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.
我正在将 Bootstrap 用于我网站的一部分。我将手风琴与下拉按钮混合在一起。当按钮位于底部时，问题就出现了，因为 .accordion-body 溢出设置为隐藏，下拉菜单被隐藏。
You can view jsfiddle here: http://jsfiddle.net/DBQU7/6/
您可以在此处查看 jsfiddle：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.
所以我做了你所期望的，试图做overflow-y:visible。但是你可以在这里看到结果，它不起作用：（你可能还注意到下拉在 div 内，它在 div 内创建了一个滚动条，而不是仅仅显示出来。
I saw this question that was similar: Twiiter Bootstrap (Button Dropdown) + Div Fixed
我看到了这个类似的问题：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.
到目前为止我发现的唯一解决方案（我很高兴被证明是错误的）是添加一个 CSS 属性，使溢出在打开时可见，然后通过 JS 脚本使其在可见和隐藏之间切换......不理想，但到目前为止没有更好的。
-- Edited -- It actually doesn't work very well and doesn't seem to be a viable solution.
-- 编辑 -- 它实际上效果不佳，似乎不是一个可行的解决方案。
回答by ScottS
Original Idea
创见
You were very close with your solution. This is it:
你非常接近你的解决方案。就是这个：
.accordion-body.in { overflow:visible; }
The .inclass is added when opened, and thus only sets visibility when open.
在.in打开的时候类被添加，因此只设置可见性时开放。
Update That May Help with Chrome Bug
可能有助于解决 Chrome 错误的更新
The bug mg1075 notes below can be solved by a slight change to the code above, like so:
下面的 bug mg1075 注释可以通过对上面的代码稍加更改来解决，如下所示：
.accordion-body.in:hover { overflow:visible; }
This essentially prevents the overflowfrom occurring before the animation is complete. It works well, except that when you click your down button to open the dropdown, and then exitthe .accordion-bodyit will crop off the dropdown again, but only until you mouseover the dropdown area again. Some might consider the behavior preferable.
这基本上可以防止在overflow动画完成之前发生。它运行良好，除了当您单击向下按钮打开下拉菜单，然后退出时，.accordion-body它将再次裁剪掉下拉菜单，但仅当您再次将鼠标悬停在下拉区域上时。有些人可能认为这种行为更可取。
回答by VUE-fr
Another solution which seems to work in every browsers :
另一个似乎适用于所有浏览器的解决方案：
.accordion-body[class*="in collapse"]{ overflow:visible;}
回答by mg1075
I don't know if you would find this an acceptable alternative solution, or how many items your dropdown would have, but you could use the "dropup" class, so as to make the dropdown menu drop UP instead of down.
我不知道您是否会发现这是一个可接受的替代解决方案，或者您的下拉列表将有多少项，但您可以使用“ dropup”类，以便使下拉菜单下拉而不是下拉。
<div class="btn-group dropup">
UPDATE
更新
Rather kludgy at this point, yet in a limited sense, it "works".
在这一点上相当笨拙，但在有限的意义上，它“有效”。
$(".special-drop, .special-drop .caret").click(function() {
var $myCollapsable = $(this).closest(".collapse"),
$myDropDown = $(this).closest(".dropdown"),
$myDropDownMenu = $(this).next(".dropdown-menu");
function toggleDropMenu() {
if ($myDropDown.hasClass("open")) {
$myDropDownMenu.hide();
} else {
$myDropDownMenu.show();
}
}
if ($myCollapsable.css("overflow") === "hidden") {
$myCollapsable.css("overflow", "visible");
toggleDropMenu();
} else {
$myCollapsable.css("overflow", "hidden");
$myDropDownMenu.hide();
toggleDropMenu();
}
});
$(document).click(function() {
$(".collapse").css("overflow", "hidden");
$(".dropdown-menu").hide();
});?
回答by Jeffery To
Set overflow: visiblewhen the menu is open (demo):
设置overflow: visible菜单打开时（演示）：
$('html').on('click', function() {
setTimeout(function() {
$('[data-toggle="dropdown"]').closest('.collapse').css('overflow', '');
}, 0);
});
$('body').on('click', '[data-toggle="dropdown"]', function() {
var parent = $(this).parent(), collapse = parent.closest('.collapse');
setTimeout(function() {
collapse.css('overflow', parent.hasClass('open') ? 'visible' : '');
}, 0);
});
There seems to be a redraw issue in Chrome (tested with Chrome 19 on Linux) if we set overflow directly. setTimeout()works around this issue.
如果我们直接设置溢出，Chrome 中似乎存在重绘问题（在 Linux 上用 Chrome 19 测试）。setTimeout()解决这个问题。
回答by zadarum
If you have found your way here looking for help with getting the Bootstrap button dropdown to work inside of jqgrid (from the linked question), the answer turns out to be dead simple. First, in the colModel entry for your button column, set a css class using the 'classes' attribute, then add a line to your css file to make the style for that class overflow: visible. As a bonus, if you set title: false in the colModel entry, you will get rid of the tooltip hover on your button.
如果您在这里找到了让 Bootstrap 按钮下拉菜单在 jqgrid 中工作的方法（来自链接的问题），那么答案非常简单。首先，在按钮列的 colModel 条目中，使用 'classes' 属性设置一个 css 类，然后在 css 文件中添加一行以使该类的样式溢出：可见。作为奖励，如果您在 colModel 条目中设置 title: false ，您将摆脱工具提示悬停在您的按钮上。
So:
所以：
colModel:[...
{name:"Action", index:"RecID", classes:"actionTD", title:false, label:"Action", width: 80, fixed: true, sortable:false, align: 'center', formatter: 'actionFormatter'}
and:
和：
.ui-jqgrid tr.jqgrow td.actionTD {overflow: visible;}
回答by eaj
I know I'm seven months late to this party, but maybe someone else will find this helpful.
我知道我参加这个聚会晚了七个月，但也许其他人会觉得这有帮助。
The cleanest solution I've found to this problem is to use the Bootstrap event handlers on the accordion. It's still kind of kludgy, but IMO it's less hackish than the accepted answer by ScottS (which I think would be better if not for the behavior in Chrome).
我找到的最干净的解决方案是在手风琴上使用 Bootstrap 事件处理程序。它仍然有点笨拙，但 IMO 没有 ScottS 接受的答案那么黑客（我认为如果不是因为 Chrome 中的行为会更好）。
$(document).ready(function() {
$('.accordion-body').on('shown', function() {
$(this).css('overflow', 'visible');
});
$('.accordion-body').on('hide', function() {
$(this).css('overflow', 'hidden');
});
});
回答by baptme
add an id to the dropdown toggle link.
向下拉切换链接添加一个 id。
example:
例子：
id="actionButton"
and with jQuery
并使用 jQuery
function actionButtonExpand() {
var actionButtonDropdownMenuHeight=$(this).parent().children(".dropdown-menu").height()+19;
var actionButtonAccordionBodyHeight = $(this).parent().parent().parent().height();
var actionButtonAccordionBodyExtended = actionButtonDropdownMenuHeight+actionButtonAccordionBodyHeight;
$(this).dropdown();
if($(this).parent().hasClass("open")){
$(this).parent().parent().parent().css("height","");
$(this).parent().css("margin-bottom","9px");
} else {
$(this).parent().parent().parent().height(actionButtonAccordionBodyExtended);
$(this).parent().css("margin-bottom",actionButtonDropdownMenuHeight);
}
}
function actionButtonContract() {
$("#actionButton").parent().parent().parent().css("height","");
$("#actionButton").parent().css("margin-bottom","9px");
}
$("#actionButton").click(actionButtonExpand);
$(".accordion-toggle").click(actionButtonContract);
回答by artlung
So here's a partial solution. This does make the dropdown go upward on purpose. Making it a dropup.
所以这里有一个部分解决方案。这确实使下拉菜单故意向上。使它成为一个下拉菜单。
Here's the CSS rule to add:
这是要添加的 CSS 规则：
.btn-group.open-upward.open ul.dropdown-menu {
top: auto;
bottom: 100%;
}
So the class to add is open-upward
所以要添加的类是 open-upward
<div class="btn-group open-upward">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
<li>Dropdown stuff</li>
<li>Dropdown stuff</li>
<li>Dropdown stuff</li>
<li>Dropdown stuff</li>
</ul>
</div>
I say partial because once you add the class, it will go upward. You'd have to remove the class to reverse it back to the default behavior.
我说部分是因为一旦你添加了这个类，它就会上升。您必须删除该类才能将其恢复为默认行为。
回答by Ray
This is all you should need to add to make the dropdown menu show:
这是您需要添加的所有内容才能显示下拉菜单：
#collapseThree {
overflow: visible;
}?
回答by Will
This is the first result for this issue in Google, so I'm going to repost this here on behalf of the bootstrap community. According to the bootstrap team, this problem should be fixed in 3.0; below is the recommended interim solution:
这是 Google 中针对此问题的第一个结果，因此我将代表引导程序社区在此处重新发布。根据bootstrap团队的说法，这个问题应该在3.0中修复；以下是推荐的临时解决方案：
In boostrap.js, alter the transition function:
在 boostrap.js 中，更改转换函数：
, complete = function () {
if (startEvent.type == 'show') that.reset()
that.transitioning = 0
that.$element[method]('fully').trigger(completeEvent)
}
in boostrap.css, add this class:
在 boostrap.css 中，添加这个类：
.collapse.in.fully
{
overflow:visible;
}
I've tested this in IE8, 9, and 10, FF 11 & 12. Those are all the browsers allowed on our network, but if it functions in IE8 and FF11, chances are good it'll work everywhere. I had problems with the accepted solution in FF11.
我已经在 IE8、9 和 10、FF 11 和 12 中对此进行了测试。这些是我们网络上允许使用的所有浏览器，但如果它在 IE8 和 FF11 中运行，则很有可能它可以在任何地方运行。我在 FF11 中接受的解决方案有问题。
source: twitter github issue #3601
来源：twitter github 问题 #3601
