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

问题描述

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

 < div class =dropdown> 
< a class =inputBarA dropdown-toggledata-toggle =dropdownhref =＃> FILTER< / a> 
< ul class =dropdown-menurole =menuaria-labelledby =dLabel> 
< li role =presentation> 
< a role =menuitemhref =＃>文本< / a> 
< / li> 
< li role =presentation> 
< label>标签名称< / label> 
< label>标签名称< / label> 
< label class =checkbox> 
< input type =checkbox> 
文本< / label> 
< label class =checkbox> 
< input type =checkbox> 
文本< / label> 
< label class =checkbox> 
< input type =checkbox> 
文本< / label> 
< label class =checkbox> 
< input type =checkbox> 
文本< / label> 
< / li> 
< li class =dropdown-submenu> 
< a tabindex = -  1href =＃>中心< / a> 
< ul class =dropdown-menu> 
< label class =radio> 
< input type =radioname =optionsid =optionsRadios1value =A已检查> 
 AA< / label> 
< label class =radio> 
< input type =radioname =optionsid =optionsRadios2value =B> 
 BB< / label>< label class =radio> 
< input type =radioname =optionsid =optionsRadios2value =C> 
 CC< / label>< label class =radio> 
< input type =radioname =optionsid =optionsRadios2value =D> 
 DD< / label>< label class =radio> 
< input type =radioname =optionsid =optionsRadios2value =E> 
 EE< / label> 
< / ul> 
< / li> 
< / ul> 
< / div> 
  

解决方案

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

所以简短的Bootstrap答案是将类dropup应用于< ul> 在早期版本的引导程序中：

 < ul class = dropdown-menu dropuprole =menuaria-labelledby =dLabel> 
  

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

 < div class =dropup> 
< ul class =dropdown-menurole =menuaria-labelledby =dLabel> 
< / div> 
  

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

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

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

像（用jQuery） ：

$ b

  $（'。dropdown-submenu'）。hover（
 function（）{
 / / hover in 
 $（'。dropdown-submenu> ul'）。css（'top'，' - '+ $（'。dropdown-submenu> ul'）css（'height'）） ; 
 
}，
 // hover out 
 function（）{
} 
）; 
  

小提琴： 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屋！