javascript - 动画 Accordion 高度不起作用

Question

我有一个隐藏内容设置为 height:0 的 Accordion ，但是当我点击 toggle-firer 时，我希望它以 height:auto 动画>，但似乎什么也没发生。 这也不能依赖任何现代解决方案，例如 CSS3。

http://codepen.io/anon/pen/uaytq

HTML:

<div class="collapse-group">
    <div class="collapse-header">
      <h1>Some Title</h1>
    </div>
    <div class="collapse-toggle">
        <div class="icon">&plus;</div>
    </div>
    <div class="collapse-content">
        Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! 
    </div>
</div>

jQuery:

$('.collapse-toggle').click(function () {
    var that = $(this).find('.collapse-content');
    that.animate({'height':'auto'}, 500);
});

CSS:

.wrap {
  background:#999999;
  margin:0 auto;
  width:500px;
}
.collapse-toggle {
  background: transparent;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: -60px;
  cursor: pointer;
}
.collapse-toggle .icon {
  width: 60px;
  height: 60px;
  font-size: 80px;
  line-height: 60px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  margin: 0 auto;
  color: #f79727;
  background: white;
  z-index: 9;
}
.collapse-group {
  *zoom: 1;
  position: relative;
  padding-top: 2em;
}
.collapse-group:before,
.collapse-group:after {
  content: "";
  display: table;
}
.collapse-group:after {
  clear: both;
}
.collapse-group.we-create {
  padding-top: 0;
}
.collapse-group.orange {
  background: #f79727;
}
.collapse-group.orange .section-headline,
.collapse-group.orange .section-tagline {
  color: white;
}
.collapse-group.orange .icon {
  color: white;
  background: #f79727;
}
.collapse-group .collapse-content {
  height: 0;
  overflow: hidden;
}

Answer 1

无需知道高度或使用高度方法，尝试以下

http://jsfiddle.net/19byov36/或 http://codepen.io/anon/pen/vtsLd

$('.collapse-toggle').click(function () {
    var that = $(this).next();
    that.slideToggle();
});

或者你可以在一行中完成这一切

$(this).next().slideToggle();

CSS

.collapse-group .collapse-content {
  display: none;
}

这适用于提供的代码，如果内容不是您可以遍历父元素的下一个元素，然后找到内容

$(this).closest('.collapse-group').find('.collapse-content');

在你的原始代码中

$(this).find('.collapse-content');

将不起作用，因为 collapse-content 不是切换的子项。我还去掉了内容上的高度0，改成了显示无