7
Ich verwende eine eckige Akkordeon-Direktive, um Inhalt zu verstecken/anzuzeigen.Eckiges Akkordeon erweitert die Höhe nicht
Das Problem, mit dem ich konfrontiert bin, ist, dass sich die Höhe des Inhaltscontainers nicht ändert.
Hier ist ein Plunker: http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview
Wenn Sie auf anzeigen Mehr klicken, können Sie sehen, wie der Inhalt verborgen ist eher als die Höhe der Show-Jobs ändern.
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);
}
}
});
Wenn ich die Show-Jobs Element inspizieren, kann ich sehen, daß es eine Anfangshöhe von 312px hat. Wenn ich das entferne, funktioniert es wie erwartet.
Dies könnte mit CSS und Angular-Animationen gelöst werden, wenn Sie nicht auf CSS-Logik angewiesen, um Ihre Zeilen nach 3 Elementen zu wickeln. Ansonsten ist Christinas Antwort die beste Lösung, die Sie finden werden. –