我使用角度手风琴指令来隐藏/显示内容。
我面临的问题是内容容器的高度没有变化。
这里是一名掠夺者：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, 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元素，我可以看到它的初始高度为312px。如果我删除它，那么它按预期工作。
答案 0 :(得分：6)
如果你的意图是使slider-content-directive上下滑动，当你点击按钮时隐藏/显示内容，它似乎正常......
好的，我知道发生了什么。好吧，所以问题似乎是固定高度为300px。您可以将其覆盖为height：auto;，但这会破坏容器的滑动动画 - 因为转换需要转换开始和结束的硬值。现在，至少有两种方法可以解决这个问题：
答案 1 :(得分：6)
正如Giliar已经说过的，问题是你有一个固定的高度，它不允许你的section元素自动获得它的高度以适应它的所有内容（包括新扩展的手风琴）。我可以为此提出的解决方案（就我所知，这也是Bootstrap的功能）
section的高度设置为auto，这样，如果展开嵌套的div，section将正确展开。section，将重新设置为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，而是始终将其设置为其内容的高度。执行此操作后，如果该部分应该折叠，则使用$ 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,0,0)';
content.style.border = 0;
}
else {
$timeout(closeAccordionFunc, 0);
}
attrs.expanded = !attrs.expanded;
$timeout(adjustHeightFunc, 800);
});
请参阅updated Plunker。
编辑：从评论设置结果来看，使用超时0执行的closeAccordionFunc对所有浏览器都不起作用。解决方法是声明一个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。
答案 2 :(得分：1)
我认为编码只有在你写得少而且做得更多时才有意义（好吧，这是jQuery的座右铭，但它是一个很好的座右铭）。在那个想法之后，我只有一把css手风琴，我真的觉得它可能有用。我已经发布了here。它基于材料here。主要的ideea是单选按钮的实用程序（也可以使用复选框）。我认为为此制作一个AngularJS代码非常繁重。代码是：
.accordion-example .accordion input[type="radio"] {
position: absolute;
left: -9999rem;
}
.accordion-example .accordion label {
display: block;
background: #4f6f8b;
color: #fff;
text-align: center;
padding: 1rem;
font-size: .8em;
letter-spacing: .13em;
padding-left: .13em;
padding-right: 0;
text-transform: uppercase;
cursor: pointer;
height: 3.3rem;
font-weight: 300;
transition: background 400ms, color 400ms, border-radius 400ms;
}
.accordion-example .accordion label:hover {
background: #385670
}
.accordion-example .accordion .baffle {
position: relative;
height: 3.3rem;
overflow: hidden;
transition: height 400ms;
-webkit-transform: translateZ(0);
}
.accordion-example .accordion .baffle-inner {
padding: 1.25rem;
background: #eee;
position: absolute;
top: 3.3rem;
left: 0;
height: 13.5rem;
-webkit-overflow-scrolling: touch;
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden
}
.accordion-example .accordion .baffle-inner :first-child {
margin-top: 0
}
.accordion-example .accordion .baffle-inner :last-child {
margin-bottom: 0
}
.accordion-example .accordion input[type="radio"]:checked + .baffle {
height: 16.8rem
}
.accordion-example .accordion input[type="radio"]:checked + .baffle label {
background: #eee;
color: inherit;
box-shadow: inset 0 -1px rgba(0, 0, 0, .15);
font-weight: 300
}
.accordion-example .accordion input[type="radio"]:checked + .baffle:not(:first-of-type) label {
border-radius: 0
}
.accordion-example .accordion input[type="radio"]:not(:checked) + .baffle + input[type="radio"]:not(:checked) + .baffle label {
box-shadow: inset 0 1px rgba(0, 0, 0, .15);
}
.accordion-example ::-webkit-scrollbar {
width: .9375rem
}
.accordion-example ::-webkit-scrollbar-thumb {
background: #849cb1;
border: solid #eee;
border-width: .375rem .375rem .375rem 0;
border-radius: 0 .375rem .375rem 0
}
.accordion-example ::-webkit-scrollbar-thumb:window-inactive {
background: #aaa
}<div class="accordion-example">
<div class="accordion">
<input type="radio" id="radio-option-1" name="accordion-radios" checked>
<div class="baffle">
<label for="radio-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.
</div>
</div>
<input type="radio" id="radio-option-2" name="accordion-radios">
<div class="baffle">
<label for="radio-option-2">Lorem</label>
<div class="baffle-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus bibendum arcu non sodales. Aenean consequat viverra velit sed elementum. Sed id neque eu quam ultricies blandit ut a lacus. Maecenas et feugiat turpis. Suspendisse nec sem massa. Nullam aliquam sem nibh, non pretium ante posuere vitae. Pellentesque rutrum lacinia enim, eget ornare felis egestas vel. Mauris ullamcorper, ex sit amet pellentesque facilisis, tellus nulla sodales mauris, eu euismod ligula leo in diam. Morbi at leo sit amet est suscipit imperdiet at ac nibh. Fusce ex nisi, rutrum sed sollicitudin eget, rutrum id sapien. </p>
</div>
</div>
<input type="radio" id="radio-option-3" name="accordion-radios">
<div class="baffle">
<label for="radio-option-3">ipsum</label>
<div class="baffle-inner">
Suspendisse sit amet lorem tempor, feugiat mauris quis, vehicula ante. Maecenas quis mauris quis tortor hendrerit bibendum et sed orci. Donec semper vel risus in scelerisque. Duis consectetur molestie dolor, eu aliquet ipsum maximus et. Ut massa sem, facilisis convallis nisi vel, posuere ullamcorper dolor. Donec accumsan ligula ornare ante convallis ornare. Donec lectus nibh, pharetra eget accumsan ac, vehicula quis elit. Nulla at mi ac metus ornare vehicula. Suspendisse ac metus maximus, semper est sed, gravida nisl. Nunc finibus lectus non magna congue malesuada. Cras auctor volutpat convallis. Pellentesque.
</div>
</div>
</div>
</div>
我希望它有所帮助。
编辑：由于Dave Alperovich要求在高度和动态内容问题上有适当的代码，我发布以下代码。
.accordion input[type="checkbox"], .accordion input[type="radio"] {
position:absolute;
left:-9999em
}
.accordion .baffle {
position:relative;
overflow:hidden;
height:100%
}
.accordion label {
display:block;
text-align:center;
padding:1em;
cursor:pointer;
height:100%;
background:#00bfa5;
color:#000;
font-weight:300;
letter-spacing:.13em;
text-transform:uppercase
}
.accordion label:hover {
background:#1de9b6
}
.accordion .baffle-inner {
padding:0 1.25em;
height:0;
opacity:0;
-webkit-transition:all 500ms ease-in-out;
-o-transition:all 500ms ease-in-out;
transition:all 500ms ease-in-out
}
.accordion > .baffle > input[type="checkbox"]:checked ~ .baffle-inner, .accordion > .baffle > input[type="radio"]:checked ~ .baffle-inner{
padding:1.25em;
height:100%;
margin-bottom: 20px;
opacity:1
}
.accordion > .baffle > input[type="checkbox"]:checked ~ label, .accordion > .baffle > input[type="radio"]:checked ~ label {
background:#eee;
box-shadow:inset 0 -1px rgba(0,0,0,.4);
font-weight:300
}
.accordion > .baffle > input[type="checkbox"]:checked ~ label:hover, .accordion > .baffle > input[type="radio"]:checked ~ label:hover {
background:#1de9b6
}<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>
这是第一个的编辑。我使用复选框而不是单选按钮，并使用非固定高度。这证明可以做到。
如果您觉得有用，请+1。