如果下拉菜单位于浏览器窗口底部，使其向上展开，根据位置自动在向下和向上之间切换。

Question

如果下拉菜单位于浏览器窗口底部，使其向上展开，根据位置自动在向下和向上之间切换。

javascripthtmlcssangularjsangular-ui-bootstrap

8

我在下拉菜单方面遇到了问题，它向下展开，但根据窗口大小应该向上展开。我在Angular UI Grid中遇到了这个问题。请查看链接以更好地理解。

<div ng-controller="MyCtrl">
<div class="container">
    <div class="row">
        <div class="span2">
            <table class="table">
                <tr ng-repeat="row in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]">
                    <td> <a>{{row}}</a>

                    </td>
                    <td>
                        <ul class="nav">
                            <!-- To create dropups instead of dropdowns i could add the class "dropup" to the li-element below. -->
                            <!-- But what I need is an inteligent mechanism that decides when to use dropdown and when to use dropup -->
                            <li class="dropdown"> <a class="btn-link dropdown-toggle">
                                <i class="icon-align-justify"></i>
                            </a>

                                <ul class="dropdown-menu">
                                    <li ng-repeat="menu in [1,2,3]"> <a class="btn-link">{{menu}}</a>

                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

- Ankush Verma

使您的下拉菜单容器元素变为绝对定位，父元素设为相关定位，就可以工作了。 - Avnesh Shakya

我已经添加了，但仍然发生相同的事情。 - Ankush Verma

它在Bootstrap文档中...搜索.dropup。 - epascarello

6

@epascarello - 你能否撤销此问题的关闭/重复标签？它不是一个重复的问题，我认为你误解了它。这个问题是关于自动切换向上或向下箭头的，取决于位置，'.dropup' 最多只能作为任何正确答案中的一个组件。请帮忙处理一下，谢谢。 - Ian

2

@epascarello：你能回答这个问题吗？它不是重复的。被标记为这个问题的重复的那个实际上是不同的，只是关于如何始终向上呈现下拉菜单，而不是基于它的位置。 - Srikanth

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ghassen Louhaichi · Accepted Answer

你必须自己处理这个问题，可能会有些混乱，但我真的不知道你能否以其他方式完成它。我已经修改了你的li标签，添加了一个class（也可以使用id）属性，以便使用jQuery（或者如果你愿意的话，使用普通的javascript）引用它，然后添加了一个ng-class，以便动态地分配dropdown或dropup。

<li class="{{'row-' + row}}" ng-class="getClass(row)">
    <a class="btn-link dropdown-toggle"><i class="icon-align-justify"></i></a>
    <ul class="dropdown-menu">
        <li ng-repeat="menu in [1,2,3]"> <a class="btn-link">{{menu}}</a></li>
    </ul>
</li>

现在，在您的控制器内，您可以创建 getClass 函数来决定根据下拉列表相对于窗口的位置，它应该具有哪个类。

var dropdownHeight = 140; // estimate/calculate the dropdown list's height manually
$scope.getClass = function (row) {
    if ($(window).height() - $('.row-' + row).position().top < dropdownHeight) {
        return 'dropup';
    }
    return 'dropdown';
};

您可以尝试调整高度的值，直到满意为止，但请记住，您可能需要在窗口大小变化时（以及相关事件）添加事件监听器，以便根据新数字重新计算类。