如何将 Bootstrap 下拉子菜单设置为“dropup”

Posted 2023-03-05

【中文标题】如何将 Bootstrap 下拉子菜单设置为“dropup”

【英文标题】：How to get a Bootstrap dropdown submenu to 'dropup'

【发布时间】：2013-07-09 00:21:43

【问题描述】：

我有一个 Bootstrap 下拉菜单。最后一个li 项目是一个子菜单。当完整菜单下拉时，如何让子菜单下拉？代码如下：

<div class="dropdown">
    <a class="inputBarA dropdown-toggle" data-toggle="dropdown" href="#">FILTER</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li role="presentation">
            <a role="menuitem" href="#">Text</a>
        </li>
        <li role="presentation">
            <label>Label name</label>
            <label>Label name</label>
            <label class="checkbox">
                <input type="checkbox">
                Text </label>
            <label class="checkbox">
                <input type="checkbox">
                Text </label>
            <label class="checkbox">
                <input type="checkbox">
                Text </label>
            <label class="checkbox">
                <input type="checkbox">
                Text </label>
        </li>
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Centralities</a>
            <ul class="dropdown-menu">
                <label class="radio">
                    <input type="radio" name="options" id="optionsRadios1" value="A" checked>
                    AA </label>
                <label class="radio">
                    <input type="radio" name="options" id="optionsRadios2" value="B">
                    BB </label><label class="radio">
                    <input type="radio" name="options" id="optionsRadios2" value="C">
                    CC </label><label class="radio">
                    <input type="radio" name="options" id="optionsRadios2" value="D">
                    DD </label><label class="radio">
                    <input type="radio" name="options" id="optionsRadios2" value="E">
                    EE </label>
            </ul>
        </li>
    </ul>
</div>

【问题讨论】：

JSFiddle: jsfiddle.net/ZgyZP

我希望它具有与 Bootstrap 中的 'dropup' 类相同的 'dropup' 行为。请参阅twitter.github.io/bootstrap/components.html#dropdowns

的“dropup”示例

对于按钮组，只需将下拉类添加到 .btn-group 父级。在 BSv3 中为我工作getbootstrap.com/docs/3.3/components/#btn-dropdowns-dropup

【参考方案1】：

听起来下面的答案是如何从头开始，我不知道 Bootstrap 中有一个下拉类...

所以简短的 Bootstrap 答案是将类“dropup”应用于早期版本的 bootstrap 中的<ul>：

 <ul class="dropdown-menu dropup" role="menu" aria-labelledby="dLabel">

但是，在较新版本的引导程序 (v3) 中，“dropup”类需要应用于<ul> 的容器，而不是<ul> 本身：

<div class="dropup">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
</div>

见http://jsfiddle.net/ZgyZP/5/

不使用引导程序的原始工作答案：

您可以使用 javascript 计算子菜单的高度，然后负偏移子菜单的位置。

类似（使用 jQuery）：

$('.dropdown-submenu').hover(
    function()
    //hover in 
        $('.dropdown-submenu > ul').css('top', '-' + $('.dropdown-submenu > ul').css('height'));

    ,
    //hover out
    function()
    
);

小提琴：http://jsfiddle.net/ZgyZP/4/

【讨论】：

这是不正确的，dropup 类在容器上，即<ul> 的父级，而不是<ul> 本身。引导程序 3.3.2。

感谢您的提醒，我已更新我的答案以包括引导程序 3：D

@leftclickben - 你投票给我了吗？有点荒谬，因为我的回答是在引导程序版本 3 出现之前很久...

是的，我想我更反对这样一个事实，即当它不是（不再）时，它被标记为正确答案，对此感到抱歉。现在这是一个赞成票，您的答案比另一个更好，因为它包含两个版本的引导程序。感谢更新:-)

@leftclickben - 感谢您提醒我更新：D

【参考方案2】：

使用类，例如 up <ul class="dropdown up">

向上的书写风格 .up bottom:100% !important; top:auto !important;

注意： 根据您的按钮大小增加底部。

【讨论】：

这对我有用。 “dropup”类不起作用，使我的菜单不可见。也许是因为我的菜单以某种奇怪的方式嵌套。

greeeeeeeat 解决方案！

一个美丽、华丽的答案。希望我能给它加两个。非常感谢！这个dropup课程已经困扰我好几个月了。

.dropup 不适用于我所拥有的，但这很有效

@paulos 其dropdown up

【参考方案3】：

最佳解决方案：

<div class="dropup">
   <ul class="dropdown-menu"></ul>
</div>

它是引导程序中的原生类。引导程序（使用 3.1.1）css 文件有一个 .dropup .dropdown-menu 选择器，所以我就是这样发现的。

【讨论】：

不错！它还与 Bootstrap 2 兼容。

【参考方案4】：

<div class="dropup">
   <ul class="dropdown-menu"></ul>
</div> 

上面的代码是正确的，但是除非父元素设置了 position 属性，否则它不起作用。

有效的示例是 class="col-lg-12" 或只是

<div style="position: relative;">

我使用 Bootstrap v3.0.0。

【讨论】：

从 v3.3.1 开始修复。 github.com/twbs/bootstrap/commit/…

【参考方案5】：

我使用了 dropup 类，它按我的预期完美运行。

<div class="col-md-6 dropup">
                <span uib-dropdown auto-close="outsideClick">
                    <p class="input-group">
                        <input type="text" class="form-control" ng-model="int.schTimeFormatted" ng-disabled="true" name="schTime" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default cal" uib-dropdown-toggle>
                                <i class="glyphicon glyphicon-time"></i>
                            </button>
                        </span>
                    </p>
                    <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
                        <li class="timerDropdown">
                            <div class="row">
                                <div class="col-md-6">
                                    <div uib-timepicker ng-model="int.schTime" ng-change="changed()" hour-step="hstep" minute-step="mstep" readonly-input="true" min="min"
                                        max="max" show-meridian="ismeridian"></div>
                                </div>

                                <div>
                                    Booked Timeslots
                                    <ul id="timeListB">
                                        <li ng-repeat="time in bookedTimeslots">time | date:"h:mma"</li>
                                    </ul>
                                </div>
                            </div>
                            <hr>
                            <button class="pull-right">close</button>
                        </li>
                    </ul>
                </span>
            </div>