javascript – Angular Accordion没有扩大高度

我正在使用角度手风琴指令隐藏/显示内容.

我面临的问题是内容容器的高度没有变化.

这是一个吸烟者:http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview

如果单击“显示更多”,则可以看到内容是如何隐藏的,而不是显示作业的高度更改.

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,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)';
                        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元素,我可以看到它的初始高度为312px.如果我删除它,然后它按预期工作.

解决方法

正如Giliar已经说过的,问题是你有一个固定的高度,它不允许你的section元素自动获得它的高度以适应它的所有内容(包括新扩展的手风琴).我可以向此提出的解决方案(就我所知,这也是Bootstrap的功能)

>在动画结束时将节的高度设置为自动,这样如果展开嵌套的div,则该节将正确展开.
>在用户尝试将其关闭之前,将高度设置为固定高度,然后将高度设置为0,以便关闭动画正常工作.

要完成第一部分,您可以定义一个函数,将部分的高度调整为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);

要做的第二部分是在折叠部分时不要将部分的高度设置为0,而是始终将其设置为其内容的高度.执行此操作后,如果该部分应该折叠,则使用$timeout调用一个单独的函数,值为0(这样它将在一个单独的摘要周期执行),它将该部分的高度设置为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)';
        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',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.

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小