Angular UI Dropdown问题

debugcn 发表于 Dev

莫夫萨尔·贝卡耶夫（Movsar Bekaev）

在firefox中，UI Bootstrap的下拉菜单不允许我单击子元素，即显示了下拉菜单，但是它似乎是在背景中最后一层，并且单击不会到达其图层，因此我尝试了在ul，li等上使用z-index，但这是行不通的。

另外，我在Chrome中没有这个问题，该代码在这里按预期工作。

                        <div id="myDropdownMenu" >
                            <button uib-dropdown  uib-dropdown-toggle class="btn btn-default menu-btn" title="Menu">
                                <ul uib-dropdown-menu>
                                    <li role="menuitem" ng-repeat="menuitem in vm.dropdownmenu" ng-click="vm.onDropdownMenuClick(menuitem.value)">
                                        <span class="dropdown-item">{{menuitem.label}}</span>
                                    </li>
                                </ul>
                                <span class="glyphicon glyphicon-menu-hamburger" style="font-size: 32px;"></span>
                            </button>
                        </div>

莫夫萨尔·贝卡耶夫（Movsar Bekaev）

我通过使用uib-dropdown的dropdown-append-body修复了该问题

dropdown-append-to-body B（默认值：false）-将内部下拉菜单附加到body元素。

现在正确的代码如下所示：

<div id="myDropdownMenu" uib-dropdown dropdown-append-to-body>
                            <button class="btn btn-default menu-btn" uib-dropdown-toggle title="Меню">

                                <ul uib-dropdown-menu>
                                    <li role="menuitem" ng-repeat="menuitem in vm.dropdownmenu" ng-click="vm.onDropdownMenuClick(menuitem.value)">
                                        <span class="dropdown-item">{{menuitem.label}}</span>
                                    </li>
                                </ul>
                                <span class="glyphicon glyphicon-menu-hamburger" style="font-size: 32px;"></span>

                            </button>
                        </div>

正如我在文档中所读到的那样，如我所见，此选项将向主体添加内部下拉菜单，如果没有此参数，则下拉菜单将浮动在某个位置，而与创建该菜单的层没有任何关系。

如果任何人都可以说为什么专门设置此设置以及何时不使用它很有用。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。