Question

我正在编写条件逻辑，它将检测我的引导下拉列表与窗口的关系，并有条件地添加类dropup，以便下拉列表向上扩展。

我在一些表格列中有三个下拉列表，并且所有三个下拉列表中都有不同数量的项目。这是一个例子。

<td class="form-group" ng-controller="DropupController as up">
    <div class="btn-group" dropdown keyboard-nav 
          ng-class="{ 'dropup': up.isDropUp }" ng-click="up.toggleDropUp($event)">
        <button type="button" class="btn btn-default" dropdown-toggle>
            {{ otherController.text }} <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
            <li ng-repeat="item in otherController.collection" role="menuitem" 
                 ng-class="{ 'selected-dropdown-item' : item.ID == otherController.collection.ID }">
             <a href="#" ng-click="otherController.setItem(item.ID)">
             {{ item.text }}</a>
           </li>
        </ul>
    </div>
    <input hidden id="itemValue"
           name="itemValue" ng-model="otherController.ID" required /> 
          <!-- for validating the form -->
</td>

我有一个AngularJS DropupController，其函数在单击下拉列表时触发。

app.controller('DropupController', function () {
    var vm = this;

    vm.isDropUp = false;
    vm.toggleDropUp = ToggleDropUp;

    function ToggleDropUp($event) {
        var dropdownContainer = $event.currentTarget;
        var position = dropdownContainer.getBoundingClientRect().top;
        var buttonHeight = dropdownContainer.getBoundingClientRect().height;

        var dropdownMenu = $(dropdownContainer.nodeName).find('.dropdown-menu');
        var menuHeight = dropdownMenu.outerHeight();

        var $win = $(window);

        alert('MenuHeight: ' + menuHeight); //Debugging

        if (position > menuHeight && $win.height() - position < buttonHeight + menuHeight) {
            vm.isDropUp = true;
        }
        else {
            vm.isDropUp = false;
        }
    }
});

我有一些CSS，以便我可以设置实际max-height菜单元素的ul，并用我的新行为处理其他一些奇怪的事情。

.selected-dropdown-item {
    background-color: #CCCCCC;
}

.dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

.dropup .caret {
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 0px;
}

最左边的下拉菜单包含很多项目，足以点击max-height并触发滚动条。中间下拉列表中只有5个项目，最右边的下拉列表中有8个项目。最后两个没有点击max-height。

此逻辑适用于可填满max-height元素的整个300px ul的下拉列表。但是，似乎其他两个下拉菜单最终会将控制器中的menuHeight变量设置为300像素，导致菜单在不需要时掉线。如果我注释掉了触及300像素max-height的下拉列表，则报告所有剩余下拉列表的高度是最左边的现有下拉列表（其中包含5个项目）。重复此操作以删除中间下拉列表会导致最后一个下拉列表正确报告其中间内容的高度。

因此，从本质上讲，获取下拉列表的高度将始终拉高最左侧下拉列表的高度，无论我切换到哪个下拉列表。我怀疑这是与$event.currentTarget和jQuery的.find相关的范围问题，但我无法确定，而且我不确定如何进一步诊断它或解决它。有什么建议吗？

Answer 1

你可以替换var dropdownMenu = $（dropdownContainer.nodeName）.find（＆＃39; .dropdown-menu＆＃39;）;使用$（dropdownContainer）.find（＆＃39; .dropdown-menu＆＃39;）;你的案例中的nodeName将是div。

在设置max-height的情况下获取ul boot of bootstrap下拉列表总是会产生最大高度

1 个答案: