Angular UI 下拉问题

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 (Default: false) - Appends the inner dropdown-menu to the body element.

现在正确的代码如下：

<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 下拉问题

Angular UI Dropdown issue

angularjs

angular-ui