Question

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

您可以在此处查看jsfiddle：http://jsfiddle.net/DBQU7/6/

所以我做了你所期望的，尝试做overflow-y:visible。但是你可以在这里看到结果，它不起作用：（您也可以注意到下拉菜单位于div内部，这会在div中创建一个滚动条而不是仅显示。

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

我看到了类似的问题：Twiiter Bootstrap (Button Dropdown) + Div Fixed

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

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

感谢。

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

- 已编辑 - 它实际上效果不好，似乎不是一个可行的解决方案。

Answer 1

原创想法

您与解决方案非常接近。就是这样：

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

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

See the example fiddle.

可能有助于Chrome Bug的更新

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

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

这实质上可以防止在动画完成之前发生overflow。它运行良好，除了当您单击向下按钮打开下拉列表，然后退出 .accordion-body它将再次关闭下拉列表，但只有在您再次将鼠标悬停在下拉区域之后。有些人可能会认为这种行为更为可取。

See the fiddle with the update code.

Answer 2

其他解决方案似乎适用于所有浏览器：

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

Answer 3

我不知道您是否会发现这是一个可接受的替代解决方案，或者您的下拉菜单会有多少项，但您可以使用“dropup”类，以便让下拉菜单中断而不是下来。

http://jsfiddle.net/ecSH4/

<div class="btn-group dropup">

<强>更新

在这一点上相当克服，但在有限的意义上，它“有效”。

http://jsfiddle.net/ecSH4/52/

$(".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();
});

Answer 4

菜单打开时设置overflow: visible（demo）：

$('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);
});

如果我们直接设置溢出，Chrome中似乎存在重绘问题（在Linux上使用Chrome 19进行测试）。 setTimeout()解决了这个问题。

Answer 5

在下拉切换链接中添加ID。

示例：

id="actionButton"

和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);

http://jsfiddle.net/baptme/6yAnc/

Answer 6

所以这是一个部分解决方案。这确实使得下拉有意向上。让它成为一个下降。

这是要添加的CSS规则：

.btn-group.open-upward.open ul.dropdown-menu {
    top: auto;
    bottom: 100%;
}

所以要添加的课程是 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>

我说部分是因为一旦你添加了这个类，它就会向上发展。您必须删除该类才能将其反转回默认行为。

Answer 7

我知道我这个派对迟到了七个月，但也许其他人会觉得这很有帮助。

我发现这个问题最干净的解决方案是在手风琴上使用Bootstrap事件处理程序。它仍然有点像kludgy，但IMO它比ScottS接受的答案要少（我认为如果不是Chrome中的行为会更好）。

$(document).ready(function() {
  $('.accordion-body').on('shown', function() {
    $(this).css('overflow', 'visible');
  });
  $('.accordion-body').on('hide', function() {
    $(this).css('overflow', 'hidden');
  });
});

Answer 8

这是您需要添加的所有内容，以显示下拉菜单：

#collapseThree {
 overflow: visible;   
}

http://jsfiddle.net/DBQU7/6/

Answer 9

这是Google在此问题上的第一个结果，所以我将代表bootstrap社区重新发布此问题。根据bootstrap团队的说法，这个问题应该在3.0中修复;以下是推荐的临时解决方案：

在boostrap.js中，改变转换函数：

, complete = function () {
        if (startEvent.type == 'show') that.reset()
        that.transitioning = 0
        that.$element[method]('fully').trigger(completeEvent)
      }

在boostrap.css中，添加此类：

.collapse.in.fully
{
    overflow:visible;
}

我在IE8,9和10，FF 11＆amp; 12.这些是我们网络上允许的所有浏览器，但如果它在IE8和FF11中运行，那么它很可能无处不在。我对FF11中接受的解决方案有疑问。

来源：twitter github issue＃3601

Answer 10

如果你已经找到了自己的方式寻找帮助，让jtgrid中的Bootstrap按钮下拉列表工作（来自链接的问题），答案结果证明是简单的。首先，在按钮列的colModel条目中，使用'classes'属性设置一个css类，然后在css文件中添加一行以使该类的样式溢出：可见。作为奖励，如果您在colModel条目中设置title：false，您将摆脱悬停在按钮上的工具提示。

所以：

colModel:[...
    {name:"Action", index:"RecID", classes:"actionTD", title:false, label:"Action", width: 80, fixed: true, sortable:false, align: 'center', formatter: 'actionFormatter'}

和

.ui-jqgrid tr.jqgrow td.actionTD {overflow: visible;}

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

10 个答案:

原创想法

可能有助于Chrome Bug的更新