21

我将 Bootstrap 用于我网站的一部分。我将手风琴与下拉按钮混合在一起。当按钮位于底部时，问题就来了，下拉菜单被隐藏，因为 .accordion-body 溢出设置为隐藏。

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

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

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

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

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

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

谢谢。

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

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

4

10 回答 10

39

创见

你非常接近你的解决方案。就是这个：

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

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

请参阅示例小提琴。

可能有助于解决 Chrome 错误的更新

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

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

这基本上可以防止overflow在动画完成之前发生。它工作得很好，除了当您单击向下按钮打开下拉菜单然后退出时，.accordion-body它会再次裁剪下拉菜单，但直到您再次将鼠标悬停在下拉区域上。有些人可能认为这种行为更可取。

请参阅带有更新代码的小提琴。

于 2012-06-22T01:46:31.097 回答
12

另一个似乎适用于所有浏览器的解决方案：

.accordion-body[class*="in collapse"]{ overflow:visible;}
于 2012-11-27T16:24:52.453 回答
4

我不知道你是否会发现这是一个可以接受的替代解决方案，或者你的下拉菜单有多少项目，但你可以使用“ 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();
});​
于 2012-06-09T12:22:58.997 回答
2

设置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);
});

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

于 2012-06-17T20:21:09.520 回答
2

如果您在这里找到了帮助让 Bootstrap 按钮下拉菜单在 jqgrid 内部工作的方法（来自链接的问题），那么答案很简单。首先，在您的按钮列的 colModel 条目中，使用“类”属性设置一个 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;}
于 2013-03-27T22:13:30.740 回答
1

将 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/

于 2012-06-16T21:22:10.470 回答
1

所以这里有一个部分解决方案。这确实使下拉菜单故意向上。使它成为一个下拉菜单。

这是要添加的 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>

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

于 2012-06-22T04:01:01.580 回答
1

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

我发现这个问题的最干净的解决方案是在手风琴上使用 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');
  });
});
于 2013-01-04T22:39:43.257 回答
0

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

#collapseThree {
 溢出：可见；   
}​</pre>


http://jsfiddle.net/DBQU7/6/
于 2012-06-23T01:34:03.110 回答
0

这是此问题在 Google 中的第一个结果，因此我将代表引导程序社区在此处重新发布此问题。根据 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 和 12 中对此进行了测试。这些是我们网络上允许的所有浏览器，但如果它在 IE8 和 FF11 中运行，它很有可能在任何地方都可以运行。我在 FF11 中接受的解决方案有问题。

来源：推特 github 问题 #3601

于 2013-02-20T07:28:38.580 回答