如何将 Bootstrap 下拉子菜单设置为“下拉" [英] How to get a Bootstrap dropdown submenu to 'dropup'

问题描述

我有一个 Bootstrap 下拉菜单.最后一个 li 项目是一个子菜单.如何在完整菜单下拉时让子菜单下拉?代码如下:

<a class="inputBarA dropdown-toggle" data-toggle="dropdown" href="#">FILTER</a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"><li role="演示文稿"><a role="menuitem" href="#">Text</a><li role="演示文稿"><label>标签名称</label><label>标签名称</label><label class="checkbox"><输入类型=复选框">文本<label class="checkbox"><输入类型=复选框">文本<label class="checkbox"><输入类型=复选框">文本<label class="checkbox"><输入类型=复选框">文本
<a tabindex="-1" href="#">Centralities</a><ul class="下拉菜单"><label class="radio"><input type="radio" name="options" id="optionsRadios1" value="A" 选中>AA</标签><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>

解决方案

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

因此，简短的 Bootstrap 答案是将类dropup"应用于早期版本的引导程序中的

:

但是在较新版本的引导程序 (v3) 中，dropup"类需要应用于

的容器而不是
代码>本身:

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

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

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

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

类似(使用 jQuery):

$('.dropdown-submenu').hover(功能(){//悬停在$('.dropdown-submenu > ul').css('top', '-' + $('.dropdown-submenu > ul').css('height'));},//悬停功能(){});

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

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>

解决方案

It sounds like the answer below would be how to do it from scratch, I was unaware there was a dropup class in 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">

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>

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

Original working answer that doesn't use bootstrap:

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

something like (with 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/

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