Question

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

Answer 1

我已经通过使用uib-dropdown的 dropdown-append-to-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>

正如我在documentation中读到的那样，这个选项会将内部下拉菜单添加到正文中，正如我所看到的，没有此参数，下拉菜单会浮动到某个地方而与它所在的层没有任何关系创建。

如果有人能说出具体存在这个设置的原因以及什么时候不使用它会很有用。

Angular UI Dropdown问题

1 个答案: