J'utilise une directive d'accordéon angulaire pour masquer / afficher le contenu.
Le problème que je suis confronté est que la hauteur du conteneur du contenu ne change pas. P>
Voici un plumker: http://plnkr.co/edit/owxrqojpaypdbe4twt3c?p=preview P>
Si vous cliquez sur Afficher plus d'informations, vous pouvez voir comment le contenu est caché plutôt que la hauteur des travaux de spectacle changeant. P>
JS: P>
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);
}
}
});
3 Réponses :
Si votre intention est de sorte que Slider-Content-Directive glisse de haut en bas de haut en bas, de cacher / afficher le contenu lorsque vous cliquez sur le bouton, il semble fonctionner ... bien?
OK, je vois ce qui se passe. D'accord, le problème semble donc avoir une hauteur fixe de 300PX. Vous pouvez le remplacer à la hauteur: Auto;, mais cela brisera l'animation coulissante du conteneur - car les transitions ont besoin de valeurs dures pour le début et la fin des transitions. Maintenant, il y a au moins deux façons de résoudre ce problème:
Non, ouvrez le plunker. Cliquez sur Afficher mes emplois. Cliquez sur Afficher plus d'un élément de la rangée supérieure. Observez que la deuxième ligne est poussée en dessous.
J'ai utilisé max-hauteur au lieu de la hauteur. Ce n'est pas l'utilisation à moins que vous ne souhaitiez pas trop surestimer (comme je l'ai). Ils travaillent presque de la même manière. Max Hauteur peut vous donner un affect similaire et donner de la place à développer au-delà ... si vous couvrez assez. Mais alors le problème devient une réaction retardée sur la peau. C'est une approche bien pire que le retard de Christina /
Comme Giliar dit déjà, le problème est que vous avez une hauteur fixe qui n'autorise pas votre section code> de la section code> pour obtenir automatiquement sa hauteur pour correspondre à tout son contenu (y compris l'accordéon nouvellement développé). La solution que je peux proposer à ceci (qui est également à peu près ce que Bootstrap fait autant que je puisse dire)
code> se développera correctement. . li>
- Ré-définissez une hauteur fixe à la section code> lorsque l'utilisateur tente de le fermer,
avant de régler sa hauteur de 0 fort>, de sorte que l'animation de fermeture fonctionne correctement . li>
ol> Pour faire la première partie, vous pouvez simplement définir une fonction qui ajuste la hauteur code> de la hauteur code> 'sur auto code> et l'appelez après que l'animation expand est terminée. . p> xxx pré> Étant donné que l'animation expande prend 0,7 seconde, vous pouvez simplement appeler la fonction d'adjustheightfunc avec un délai d'attente de 0,8 seconde (je reçois cela n'est pas vraiment optimal, car si vous changez le Durée de votre animation Vous devrez également modifier ce délai d'attente, mais c'est la meilleure solution que j'ai trouvée jusqu'à présent, toutes les autres suggestions sont les bienvenues). Donc, à la fin de votre fonction OnClick, vous pouvez avoir: p>
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);
}
});
Merci, c'est presque là. Seul problème est que le deuxième clic de show more, le contenu abandonné disparaît, plutôt que de faire glisser.
@Oramsy êtes-vous sûr de cela? Ceci est en fait géré par la deuxième partie de ma réponse ci-dessus et je peux voir que l'accordéon glisse dans mon plumker. Quel navigateur utilisez-vous?
Yup, cliquez sur Afficher plus une fois, et le contenu glisse vers le bas. Cliquez sur le même spectacle plus à nouveau, et le contenu disparaît instantanément plutôt que de ralentir le glissement. Usinf ff et chrome.
@Ompsy Vous avez raison, dans FF, je peux aussi voir que le contenu disparaît, alors que dans Chrome, je les vois glisser comme prévu. Vous pouvez "corriger" cela en augmentant le délai d'attente que vous utilisez pour appeler le clientEAccordionfunc (50msec fonctionne pour moi et n'est pas perturbateur pour l'utilisateur). En attendant, je vais essayer de trouver une meilleure solution car je n'aime pas vraiment les corrections qui dépendent de choisir une valeur de délai d'attente "correcte".
J'ai bien peur que l'approche du délai d'attente soit assez sale et plus une workaound qu'une vraie réponse :(
@Kutyel je suis d'accord. C'est pourquoi je le mentionne comme une "solution temporaire" jusqu'à ce que je puisse trouver quelque chose de mieux.
J'aime beaucoup ça. J'ai géré ce problème exact. Je suis d'accord C'est un peu un piratage, mais il vous reste quelques options si vous utilisez CSS.
@Christina - Avez-vous été capable de trouver une solution complète pour cela?
@Oramsy, j'ai réussi à vous débarrasser de la valeur du délai d'attente personnalisé lors de la fermeture de l'accordéon à l'aide de $ $ angulaire service. Voir mon édition ci-dessus.
@Ompsy Oui, s'avère que j'avais inclus le mauvais lien de plumber, désolé pour cela. Voir le lien que j'ai inclus dans ma dernière modification.
@Christina - Merci beaucoup. Marqué comme réponse et prenant une prime.
Je pense que le codage n'est significatif que si vous pouvez écrire moins et faire plus (OK, c'est la devise de JQuery's, mais c'est une bonne). Après que l'Idea, j'ai un accordéon CSS seulement que je pense vraiment que cela peut être utile. Je l'ai déjà posté ici . Il est basé sur le matériau ici . L'Idea principale est l'utilité des boutons radio (elle peut également être faite avec des cases à cocher). Je pense que faire un code angularjs pour cela est très lourd. Le code est:
p>
<div class="accordion">
<div class="baffle">
<input id="checkbox-option-1" type="checkbox" checked="checked" name="accordion-checkboxs">
<label for="checkbox-option-1">Accordion</label>
<div class="baffle-inner">
Accordions (from 19th century German Akkordion, from Akkord - “musical chord, concord of soundsâ€) are a family of box-shaped musical instruments of the bellows-driven free-reed aerophone type, colloquially referred to as a squeezebox. A person who plays the accordion is called an accordionist. The concertina and bandoneón are related; the harmonium and American reed organ are in the same family. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim felis in lacinia vulputate. Vestibulum suscipit, lacus id tempus sagittis, ex orci molestie turpis, nec pharetra ligula arcu ac nisi. Donec in nisi arcu. Aenean non nisl purus. Fusce pretium lorem eget dui sollicitudin, eu gravida felis egestas. Vivamus orci tellus, efficitur at interdum vitae, ultricies quis urna. Sed ipsum eros, fermentum ornare ultrices vel, pharetra vitae metus. Sed ex metus, consectetur at tellus eget, porttitor molestie dolor. Duis nec metus non est tincidunt consectetur. Curabitur vel turpis sit amet leo fermentum cursus. Cras ligula erat, lobortis ut purus et, accumsan vestibulum lectus. Fusce sed nisl nisl. Aenean eget dolor lacinia, interdum ante id, fringilla orci. Cras eu porttitor est.
Fusce dignissim lectus quis ligula aliquet pretium. Vestibulum consequat risus orci, ac consectetur dolor finibus quis. Aliquam erat volutpat. Proin nunc quam, suscipit eget elementum eu, rhoncus in tortor. Aenean vitae lacinia lorem, maximus elementum urna. Vivamus vitae posuere libero, a fermentum lorem. Duis placerat laoreet ipsum, et malesuada lacus aliquam vitae.
Proin ut mauris ipsum. Suspendisse potenti. Mauris diam erat, ornare vitae tellus eget, elementum fringilla nunc. Maecenas eleifend enim non arcu blandit ullamcorper. Vivamus blandit dictum nulla, accumsan finibus leo blandit in. Curabitur nec tellus a nulla cursus semper. Sed fermentum velit quis pulvinar pellentesque.
</div>
</div>
<div class="baffle">
<input id="checkbox-option-2" type="checkbox" name="accordion-checkboxs">
<label for="checkbox-option-2">Construction</label>
<div class="baffle-inner">
Accordions have many configurations and types. What may be technically possible to do with one accordion could be impossible with another:
<br>The accordion is a free reed instrument and is in the same family as other instruments such as the sheng and khaen. The sheng and khaen are both much older than the accordion and this type of reed did inspire the kind of free reeds in use in the accordion as we know it today.The accordion’s basic form is believed to have been invented in Berlin in 1822 by Christian Friedrich Ludwig Buschmann, although one instrument has been recently discovered that appears to have been built earlier.
</div>
</div>
<div class="baffle">
<input id="checkbox-option-3" type="checkbox" name="accordion-checkboxs">
<label for="checkbox-option-3">History</label>
<div class="baffle-inner">
<p>The accordion is a free reed instrument and is in the same family as other instruments such as the sheng and khaen. The sheng and khaen are both much older than the accordion and this type of reed did inspire the kind of free reeds in use in the accordion as we know it today.</p>
<p>The accordion’s basic form is believed to have been invented in Berlin in 1822 by Christian Friedrich Ludwig Buschmann, although one instrument has been recently discovered that appears to have been built earlier.</p>
</div>
</div>
</div>Je conviens que si vous pouvez résoudre un problème avec CSS, vous devriez, mais comment cela aborde-t-il la question des accordiens intégrés? Autant que je sache, votre hauteur fixe serait bien pire pour des données dynamiques même sans comptabiliser des accordiens imbriqués.
De toute évidence, vous devez utiliser la largeur de changement et la hauteur de 0 à 100%. Il suffit de tester des variantes du code et cela fonctionnera dans la façon dont vous voulez.
De votre réponse et de votre réponse, je soupçonne que vous n'avez pas compris l'exemple de l'OP et ce qui rend la tâche de l'OP difficile. Lorsque vous avez la taille dynamique de l'accordien, le défi d'utiliser Pure CSS est génial. Le problème de l'OP traite d'un accordéon de données dynamiques avec des accordiens imbriqués de taille variable. Votre exemple est le contraire. Il est fixe et simple. Vous êtes toujours nouveau à Stackoverflow, mais semble très désireux d'aider. Je crains que vous soyez plus désireux d'aider que de comprendre le problème.
J'ai édité le code. J'espère que vous le considérerez mieux comme une solution du problème. Oui, je suis nouveau et je ne veux pas faire une mauvaise impression. Croyez-moi, je lis vraiment complètement le problème avant de poster. Je respecte cette génie impressionnante.
D'accord. Regardé votre nouveau code. Question pour vous: avez-vous regardé l'application PLNKR de l'OP? Avez-vous essayé d'ouvrir son accord de haut niveau, ou des accordiens imbriqués? Avez-vous regardé Christina's Plnkr? Pouvez-vous identifier le problème qu'elle a résolu, pourquoi c'était un problème et ce qui gêne toujours l'op de sa solution?
Je pas Vous voulez avoir une bagarre avec vous, étant donné la différence d'année légère entre nous. Mais pour répondre à vos questions, j'ai fait tous les tests mentionnés lorsque je l'ai posté pour la première fois. La question christina résolue était l'absence de la hauteur adaptative de la section en utilisant des fonctions chronométrées. La question que les deux OP et Christina ont les deux lacunes sont que les fonctions elles-mêmes ne sont pas naturelles, elles vous donnent du mal si vous souhaitez modifier quoi que ce soit à l'avenir. Désolé pour toute cette histoire, si vous voulez avoir ma réponse supprimée, je le ferai.
Non, je ne veux pas dire cela personnellement. Bien qu'il soit très difficile de ne pas discuter du travail de quelqu'un sans être personnel. Je ne suis pas intéressé à la baisse de votre réponse, de la supprimer ou de vous faire mal à l'aise. Je ne sais pas combien de travail que vous avez fait est JS ou angulaire. Dans ce cas, je ne pense pas que vous voyiez tout le problème. J'ai fait des choses très similaires à ce que cela et ils ont été difficiles. Le problème réside dans les subtilités de la façon dont l'original fonctionne. Et l'original est un peu difficile à comprendre. Giflé ensemble.
Cela pourrait être résolu avec CSS et animations angulaires si vous n'avez pas dépassé la logique CSS pour envelopper vos lignes après 3 éléments. Sinon, la réponse de Christina est la meilleure solution que vous trouverez.