Question

我正在尝试使用angularJS 1.3.14创建一个bootstrap类型导航栏用于学习目的。我有一个navbar，navmenu，navMenuToggle和navDropDown指令。 navMenu是切换和下拉菜单的逻辑分组。

<navbar>
    <div class="navbar-brand">Brand</div>
    <collapse-icon></collapse-icon>
    <nav-menu>
        <div class="nav-button" ng-click="toggle()">Toggle Button</div>
        <nav-dropdown>
            <ul>
                <li><a href="">First Link</a></li>
                <li><a href="">Second Link</a></li>
            </ul>
        </nav-dropdown>
    </nav-menu>
</navbar>

问题在于，当我扩展＆＃39;导航栏，并双击切换按钮，菜单关闭时导航栏的高度不会调整回来。

这是一个JS小提琴（使窗口＆lt; 798px）：http://jsfiddle.net/5st3h30j/3/

navMenu中的toggle()功能合并并通过将display设置为none或block来展开下拉列表，然后通过{{1}让导航栏知道然后触发将高度设置为新的滚动高度。

navDropdown Controller：

$scope.$parent.$parent.$broadcast('dropdownClosed')

导航栏：

控制器：

        $scope.toggle = function () {
            if ($scope.open) {
                console.log('closing dropdown');
                $scope.contract();
                $scope.open = false;
                $scope.$parent.$parent.$broadcast('dropdownClosed');
            } else {
                $scope.$parent.$parent.$broadcast('dropdownOpening');
                $scope.expand();
                $scope.open = true;
                $scope.$parent.$parent.$broadcast('dropdownOpened'); // broadcast from navbar's scope to reach all dropdowns
            }

链接功能：

        $scope.$on('dropdownClosed', function () {
            $scope.adjustHeight(); 
        });

我放入了console.logs，并且在调整高度之前确定了下拉列表。

注意：我知道这对大屏幕不起作用。我稍后会添加一些if语句。更好的方法是欣赏，但我也非常渴望知道为什么adjustHeight在扩展但不收缩时成功。

Answer 1

您无法可靠地使用element.prop('scrollHeight')来获取元素的高度。此属性旨在为您提供滚动的元素的位置 - 绝对不是您需要的。

尝试在wrost使用element.height()，但我建议避免通过Javascript设置此高度，而是找到纯CSS方式。

使用height: auto（默认值）应自行调整高度。

另外，不要从代码中编写element.css('-webkit-transition', 'height 0s')，只需在元素中添加一些类并再次使用CSS：

.my-class {
  transition: height 200ms;
}

请注意，我将转换设置为200毫秒，0的转换似乎没用，为什么要设置转换？

希望所有这些都可以帮助您解决问题。

元素scrollHeight在将内部元素的显示设置为＆＃39; none＆＃39;？

1 个答案: