javascript - 在 div 单击时切换动态(或 'auto')高度

Question

我试图让我的 FAQ 容器动态/响应，但在让它正常工作时遇到了一些问题。

目前，我可以打开容器，但如果再次单击它不会缩回(或关闭)。这是我所拥有的:

JS:

$('.faq_container').on('click', function() {
  $(this).find('.faq_up-arrow, .faq_down-arrow').toggle();
  $(this).animate({
    height: $('.faq_container').get(0).scrollHeight
  }, 250, function() {
    $(this).height('auto');
  });
});

这是一个FULL DEMO以上片段...

我尝试过的另一种方法是:

$('.faq_container').on('click', function () {
    $(this).find('.faq_up-arrow, .faq_down-arrow').toggle();
    if ( $(this).height() != 40) {
        $(this).animate( { height : 40 }, 250);
    } else {
        $(this).animate( { height : 400 }, 250);
    }
});

但是，正如您在此处所见，这是基于“固定”高度，而不是将其设置为更具动态/响应性的方式...

这是一个DEMO对于这个其他选择

如果可能的话，我想使用第一种方法，但似乎无法让 div 重新关闭...

如有任何帮助，我们将不胜感激!

Answer 1

首先，尝试使用 .slideToggle() .

然后包装你的 answer容器 <div class="answer"> . 剩下的，看我的 fiddle here .