Question

我手风琴的隐藏内容设置为height:0，但是当我点击切换开关时，我想让它动画为height:auto，但似乎没有任何事情发生。 这也不能依赖任何现代解决方案，例如CSS3。

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

您也可以使用slideDown并使用height：auto。见这里：jsFiddle

$('.collapse-toggle').click(function () {
    var that = $(this).parent().find('.collapse-content');
    that.slideDown(500);
});

还有这个给你的css：

.collapse-group .collapse-content {
    height:auto;
    display:none;
  overflow: hidden;
}

如果您想切换元素，只需更改that.slideDown(500);的{{1}}

您还需要在find（）之前包含parent（），以便它可以在正确的位置查找类.collapse-content。

Answer 2

你不需要定义一个高度。尝试修改您的JS，以便您只需在切换时添加和删除类。高度＆＃34;汽车＆＃34;将工作和css过渡将正确显示它。问题出在您的codepen中的当前JS。尝试这样的事情：

var $accordion = jQuery('.accordion');

$accordion.on('click', '.toggle', function(e) {
    e.stopPropagation();

    var $thisToggle = jQuery(e.currentTarget);
    $thisToggle.parent().toggleClass('expanded');
});

然后你可以依靠CSS和＆＃34; .toggle＆＃34;用来创造你效果的课程。

Answer 3

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

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并将其更改为显示无

Animate手风琴高度不起作用

3 个答案: