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

以上是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

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

fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

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

Answer 3

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

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/

Answer 4

也许这就是。

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

我已经添加了一个获取目标高度的函数，借用了这个similar SO post。它可以快速计算出＆＃34; auto＆＃34;身高应该是。

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上点击

4 个答案: