如何让Bootstrap下拉子菜单"dropup"

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>

Answer 1

最好的解决方案:

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

它是bootstrap中的本机类.引导程序(使用3.1.1)css文件有一个.dropup .dropdown-menu选择器,这就是我发现的方式.

Answer 2

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

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

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

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

Answer 3

使用一类,喜欢了 <ul class="dropdown up">

写风格了 .up { bottom:100% !important; top:auto !important; }

注意: 根据按钮大小增加底部.