如何获取一个Bootstrap下拉子菜单到“dropup” [英] How to get a Bootstrap dropdown submenu to 'dropup'

问题描述

我有一个Bootstrap下拉菜单。最后一个'li'项目是一个子菜单。当全菜单下降时，如何使子菜单下降？下面是代码：

I have a Bootstrap dropdown menu. The last 'li' item is a submenu. How do I get the submenu to dropup while the full menu drops down? Here's the code:

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

推荐答案

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

It sounds like the answer below would be how to do it from scratch, I was unaware there was a dropup class in Bootstrap...

所以短的Bootstrap答案是应用类dropup到< ul> 在早期版本的bootstrap中：

So the short Bootstrap answer is to apply the class "dropup" to the <ul> in earlier versions of bootstrap:

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

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

However in newer versions of bootstrap (v3) the "dropup" class needs to be applied to the <ul>'s container instead of the the <ul> itself:

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

请参阅 http://jsfiddle.net/ZgyZP/5/

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

Original working answer that doesn't use bootstrap:

您可以使用javascript来计算子菜单的高度，然后负面抵消子菜单的位置。

You could use javascript to calculate the height of the submenu and then negatively offset the submenu's position.

：

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

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

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

这篇关于如何获取一个Bootstrap下拉子菜单到“dropup”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！