单击 div 时切换动态（或 'auto'）高度

Question

我正在努力使我的 FAQ 容器成为 dynamic/responsive，但在使其正常工作时遇到了一些问题。

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

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

但是，正如您在这里看到的，这是基于 "fixed" 高度而不是将其设置为更 dynamic/responsive 的方式...

这是另一个替代方案DEMO

我想尽可能使用第一种方法，但似乎无法让 div 关闭备份...

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

Answer 1

使用jQueryeach() to iterate over the containers. Check if the container is closed using 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 2

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

然后用 <div class="answer"> 包装您的 answer 容器。剩下的，看我的fiddlehere.

Answer 3

在我的网站上，我有一些选项卡仅使用 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;
}

Fiddle: https://jsfiddle.net/8zstf5ge/27/

Answer 4

也许是这样。

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

我添加了一个获取目标高度的函数，借用了这个 similar SO post。它会快速计算出 "auto" 高度应该是多少。

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>

单击 div 时切换动态（或 'auto'）高度

Toggle dynamic (or 'auto') height on div click

html

javascript

css

jquery

jquery-animate