Question

我有一个简单的基于Angularjs的手风琴，它在过去的项目中运行良好（使用<div>而不是现在使用<li>）。手风琴打开/向下滑动，但不会再次滑动。

这是一个掠夺者：http://plnkr.co/edit/rIKIwYLowORhag7qu9Fy?p=preview

单击plunker上的+以展开。

JS：

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

            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, $animate) {
    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');
                    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);
                    }
                });
            }

            var adjustHeightFunc = function() {
              var target = angular.element($document[0].querySelector("#" + scope.target))[0];
              var content = target.querySelector('.slideable_content');
              $animate.addClass(angular.element(target), 'auto');
            }

            var closeAccordionFunc = function() {
              var target = angular.element($document[0].querySelector("#" + scope.target))[0];
              target.style.height = '0px';
            }

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

Answer 1

不确定为什么这个功能首先出现在那里，但是通过将其移出来实现它。

这一行：

$animate.removeClass(angular.element(target), 'auto', function(){$timeout(closeAccordionFunc);});

到这一行：

$animate.removeClass(angular.element(target), 'auto');
$timeout(closeAccordionFunc);

Angular Accordion没有关闭

1 个答案: