我正在使用 Angular Accordion 指令来隐藏/显示内容。

我面临的问题是内容容器的高度没有改变。

这是一个傻瓜:http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview

如果点击 Show More，您可以看到内容是如何隐藏的，而不是 show-jobs 的高度在变化。

JS:

app.directive('sliderContentDirective', function () {
    return {
        restrict:'A',
        compile: function (element, attr) {
            // wrap tag
            var contents = element.html();
            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');

            return function postLink(scope, element, attrs) {
                // default properties
                attrs.duration = (!attrs.duration) ? '0.7s' : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                element.css({
                    'overflow': 'hidden',
                    'height': '0px',
                    'transitionProperty': 'height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
});

app.directive('sliderToggleDirective', function($document, $timeout) {
    return {
        restrict: 'AE',
        scope: { 
            target: "@"
        },
        link: function(scope, element, attrs) {             

            var timeoutFunc = function () {
                var target = angular.element($document[0].querySelector("#" + scope.target))[0];

                attrs.expanded = false;  
                element.bind('click', function() {

                    var content = target.querySelector('.slideable_content');
                    if(!attrs.expanded) {
                        content.style.border = '1px solid rgba(0,0,0,0)';
                        var y = content.clientHeight;
                        content.style.border = 0;
                        target.style.height = y + 'px';
                    }
                    else {
                        target.style.height = '0px';
                    }

                    attrs.expanded = !attrs.expanded;
                });
            }

            $timeout(timeoutFunc, 0);
        }
    }
});

如果我检查 show-jobs 元素，我可以看到它的初始高度为 312 像素。如果我删除它，那么它会按预期工作。

最佳答案

正如 Giliar 所说，问题在于您有一个固定的高度，这不允许您的 section 元素自动获得其高度以适应其所有内容(包括新扩展的 Accordion )。我可以为此提出的解决方案(据我所知，这几乎也是 Bootstrap 所做的)

1. 在动画结束时将 section 的高度设置为 auto，这样如果嵌套的 div 展开，section 将正确展开.
2. 当用户尝试关闭部分时，在将其高度设置回 0 之前，重新设置该部分的固定高度，以便关闭动画正常工作.

要完成第一部分，您只需定义一个函数，将 section 的高度调整为 auto 并在展开动画完成后调用它。

var adjustHeightFunc = function() {
    var target = angular.element($document[0].querySelector("#" + scope.target))[0];
    if (attrs.expanded) {
        var content = target.querySelector('.slideable_content');
        target.style.height = 'auto';
    }
}

由于展开动画需要 0.7 秒，您只需调用 adjustHeightFunc 函数，超时为 0.8 秒(我知道这并不是最佳选择，因为如果您更改动画的持续时间，您还需要更改此超时，但这是迄今为止我找到的最佳解决方案，欢迎任何其他建议)。所以在你的 onClick 函数的最后你可以有:

$timeout(adjustHeightFunc, 800);

要完成第二部分，当该部分应该折叠时，不要将 section 的高度设置为 0，而是始终将其设置为其内容的高度。执行此操作后，如果该部分应该折叠，则使用值为 0 的 $timeout 调用一个单独的函数(以便它将在单独的摘要周期中执行)，该函数将部分的高度设置为 0，从而触发折叠动画。因此，您的 onClick 函数变成如下所示:

element.bind('click', function() {
    var content = target.querySelector('.slideable_content');
    var y = content.clientHeight;
    target.style.height = y + 'px';
    if(!attrs.expanded) {
        content.style.border = '1px solid rgba(0,0,0,0)';
        content.style.border = 0;
    }
    else {
        $timeout(closeAccordionFunc, 0);
    }

    attrs.expanded = !attrs.expanded;
    $timeout(adjustHeightFunc, 800);
});

参见 updated Plunker .

编辑: 从评论中可以看出，将 closeAccordionFunc 设置为超时 0 执行并不适用于所有浏览器。解决方法是声明一个 CSS 类，它将元素的高度设置为 auto(使用 !important 覆盖直接在元素上设置的高度)并使用 Angular 的 $animate 服务向元素添加/删除此类，并在删除类后执行 closeAccordionFunc。因此，更新后的 onClick 函数是:

element.bind('click', function() {
    var content = target.querySelector('.slideable_content');
    var y = content.clientHeight;
    target.style.height = y + 'px';
    if(!attrs.expanded) {
        content.style.border = '1px solid rgba(0,0,0,0)';
        content.style.border = 0;
    }
    else {
      $animate.removeClass(angular.element(target), 'auto', function(){$timeout(closeAccordionFunc);});
    }

    attrs.expanded = !attrs.expanded;
    if (attrs.expanded) {
      $timeout(adjustHeightFunc, 800);
    }
});

另见 in Plunker .

关于javascript - Angular Accordion 不扩展高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30259531/