如何使 Bootstrap 下拉菜单子菜单向上弹出

Question

我有一个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>

- user1114864

---

JSFiddle: http://jsfiddle.net/ZgyZP/ - Michael Freake

我希望它具有与Bootstrap中'dropup'类相同的'dropup'行为。请参见http://twitter.github.io/bootstrap/components.html#dropdowns上的'dropup'示例。 - user1114864

对于按钮组，只需将dropup类添加到.btn-group父元素即可。在BSv3中对我有效。https://getbootstrap.com/docs/3.3/components/#btn-dropdowns-dropup - Peter Chaula

Answer 1

最佳解决方案：

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

这是Bootstrap中的一个本地类。Bootstrap（使用3.1.1版本）css文件有一个.dropup .dropdown-menu选择器，这就是我发现它的方式。

- Sem

---

不错！它也与Bootstrap 2兼容。 - jävi

Answer 2

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

所以，简短的Bootstrap回答是将“dropup”类应用于引导程序早期版本中的

。

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

然而在较新版本的Bootstrap（v3）中，需要将“dropup”类应用于<ul>的容器而不是<ul>本身：

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

请查看http://jsfiddle.net/ZgyZP/5/

不使用bootstrap的原始工作答案:

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

类似这样（使用jQuery）：

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

    },
    //hover out
    function(){
    }
);

Fiddle: http://jsfiddle.net/ZgyZP/4/

- DrCord

---

这是不正确的，dropup类应该放在容器上，即<ul>的父元素，而不是<ul>本身。Bootstrap 3.3.2。 - leftclickben

谢谢提醒，我已经更新了我的答案，包括Bootstrap 3 :D - DrCord

@leftclickben - 你因为这个给我投了反对票吗？有点荒谬，因为我的回答早在Bootstrap 3版本发布之前就已经发表了... - DrCord

是的，我想我更多地是在对这个被标记为正确答案的事实进行负面评价，因为它现在已经不正确了，对此感到抱歉。现在已经点赞了，你的答案比其他答案更好，因为它包括了两个版本的bootstrap。感谢你的更新 :-) - leftclickben

@leftclickben - 谢谢你提醒我更新 :D - DrCord

Answer 3

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

编写样式的up .up { bottom:100% !important; top:auto !important; }

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

- Manjesh V

---

这对我有用。 "dropup" 类没有起作用，使我的菜单不可见。也许是因为我的菜单嵌套在一些奇怪的方式中。 - Ingvi Gautsson

非常棒的解决方案！ - Ismael

一个漂亮、华丽的回答。真希望我能给它加两个赞。非常感谢！这个 dropup 类已经困扰了我好几个月了。 - Elon Zito

".dropup在我手头的情况下无法使用，但这个方法完美解决了问题。" - pjdavis

@paulos，它是“向上下拉菜单”。 - Manjesh V

Answer 4

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

上面的代码是正确的，但是如果没有设置父元素的position属性，则不起作用。

可以使用以下示例：class="col-lg-12"或者只需将其放在一个有设置position属性的父元素中即可。

<div style="position: relative;">

我使用Bootstrap v3.0.0。

- pekaaw

---

自v3.3.1起已修复。 https://github.com/twbs/bootstrap/commit/db8eeaa17a023d547646c33449b7b86d7efa36f3 - pekaaw

Answer 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>

- kads