在 div 点击时切换动态（或“自动”）高度

Question

我正在尝试使我的常见问题解答容器具有动态/响应性，但在使其正常工作时遇到了一些问题。

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

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');
  });
});

这是上面sn-p的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()。

然后用<div class="answer"> 包裹你的answer 容器。 其余的，检查我的小提琴here。

Answer 2

使用 jQuery each() 迭代容器。使用height() 检查容器是否已关闭。如果是打开它，如果没有设置它回到原来的高度。

fiddle

$('.faq_container').each(function() {
  $(this).on('click', function(e) {

    if ($(this).height() < 41) {

      $(this).find('.faq_up-arrow, .faq_down-arrow').toggle();

      $(this).animate({
        height: $(this).scrollHeight
      }, 250, function() {
        $(this).height('auto');
      });
    } else {

      $(this).find('.faq_up-arrow, .faq_down-arrow').toggle();

      $(this).animate({
        height: $(this).scrollHeight
      }, 250, function() {
        $(this).height('40px');
      });
    }
  });
});

.faqs_container_wrapper {
  width: calc(100% - 40px);
  padding: 0 0 20px 0;
  margin: 20px 20px 0 20px;
  background: #F1F1F1;
  box-shadow: inset 0 1px #FFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  float: left;
}

.faq_container {
  width: calc(100% - 40px);
  height: 40px;
  padding: 0;
  margin: 20px 20px 0 20px;
  background: #DDD;
  border-radius: 3px 3px 0 0;
  float: left;
  position: relative;
  overflow: hidden;
}

.faq_down-arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.faq_up-arrow {
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  background: blue;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.faq_container h3 {
  width: 100%;
  height: 40px;
  padding: 0 5px;
  margin: 0;
  background: #D1D1D1;
  box-shadow: 0 1px #E1E1E1;
  border-bottom: 1px solid #333;
  border-radius: 3px 3px 0 0;
  float: left;
  color: #333;
  line-height: 40px;
  cursor: pointer;
}

.faq_container:nth-of-type(2n) h3 {
  background: #C1C1C1;
}

.faq_container h3 span {
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 5px;
  background: linear-gradient(#E67E22, #D35400);
  box-shadow: inset 0 1px #F39C12;
  border: 1px solid #E67E22;
  border-radius: 50%;
  float: left;
  color: #FFF;
  line-height: 29px;
  text-align: center;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.1);
}

.faq_container p {
  width: 100%;
  padding: 0 20px;
  margin: 20px 0 0 0;
  float: left;
}

.faq_container p:last-of-type {
  padding: 0 20px 20px 20px;
}

.faq_container p a,
.faq_container a {
  color: #C0392B;
}

.faq_container p a:hover,
.faq_container a:hover {
  color: #E74C3C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faqs_container_wrapper">

  <div class="faq_container">

    <div class="faq_down-arrow"></div>
    <div class="faq_up-arrow"></div>

    <h3><span title="Question">Q</span> Post question here</h3>
    <p><b><i>Answer</i>:</b> Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer
      here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here.
    </p>
    <p>Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here.
      Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here. Post answer here.
    </p>

  </div>

  <div class="faq_container">

    <div class="faq_down-arrow"></div>
    <div class="faq_up-arrow"></div>

    <h3><span title="Question">Q</span> Post question here</h3>
    <p><b><i>Answer</i>:</b> Post answer here</p>

  </div>

  <div class="faq_container">

    <div class="faq_down-arrow"></div>
    <div class="faq_up-arrow"></div>

    <h3><span title="Question">Q</span> Post question here</h3>
    <p><b><i>Answer</i>:</b> Post answer here <a href="#">Test</a></p>

  </div>

  <div class="faq_container">

    <div class="faq_down-arrow"></div>
    <div class="faq_up-arrow"></div>

    <h3><span title="Question">Q</span> Post question here</h3>
    <p><b><i>Answer</i>:</b> Post answer here</p>

  </div>

  <div class="faq_container">

    <div class="faq_down-arrow"></div>
    <div class="faq_up-arrow"></div>

    <h3><span title="Question">Q</span> Post question here</h3>
    <p><b><i>Answer</i>:</b> Post answer here</p>

  </div>

</div>

Answer 3

也许是这样。

https://jsfiddle.net/auunkszm/5/

我添加了一个获取目标高度的函数，这是从similar SO post 借来的。它可以快速计算出“自动”高度应该是多少。

var openClass = 'faq--open';
$('.faqs').on('click', '.faq_header', function() {
  var el = $(this).closest('.faq').toggleClass(openClass),
      content = el.find('.faq_content'),
      shouldOpen = el.hasClass(openClass);
  content.animate({ height: getTargetHeight(content, shouldOpen) }, 250);
});

function getTargetHeight(el, shouldOpen) {
  if (shouldOpen) {
    var currentHeight = el.height(),
        autoHeight = el.css('height', 'auto').height();
    el.height(currentHeight);
    return autoHeight;
  }
  return 0;
}

我还更改了您的 HTML 标记，使其更易于使用。 Try to avoid float.

<div class="faq">
  <div class="faq_header">
    <h3><span title="Question">Q</span> What the what?</h3>
    <div class="faq_arrow"></div>
  </div>
  <div class="faq_content">
    <p><!-- content --></p>
  </div>
</div>

Answer 4

在我的网站上，我有一些选项卡使用 CSS 选择器来显示和隐藏内容，应该可以用同样的方式做你正在做的事情（并且具有不需要 js 工作的优点）。

HTML：

<div class="collapsable">
 <input type="checkbox" id="faq1" />
 <label for="faq1">FAQ1</label>
 <div>
  Your FAQ goes here!
 </div>
 <input type="checkbox" id="faq2" />
 <label for="faq2">FAQ2</label>
 <div>
  Have fun with it!
 </div>
</div>

CSS：

.collapsable input { display: none }
.collapsable input + label + div { display: none }
.collapsable input:checked + label + div{ display: block; }

.collapsable label {
 cursor: pointer;
 display:block;
}

小提琴：https://jsfiddle.net/8zstf5ge/27/