javascript - 限制可见的数量

Question

我创建了问答部分，其中包含几个垂直堆叠在一起的框。我发现如果打开所有框，页面将放不下，所以我想知道是否可以使用 jQuery 的 JavaScript 来限制 active 框的数量。

$(document).ready(function() {
  $(".faqOuter").click(function() {
    $(this).toggleClass('faqOuter-change');
    $(this).parent().find('.faqInner').slideToggle(500, 'swing');

    if ($(this).parent().height() == 75) {
      $(this).parent().animate({
        height: '225'
      }), 500, 'swing';
    } else {
      $(this).parent().animate({
        height: '75'
      }), 600, 'swing';
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="faqSection">
  <div class="faqSectionSub">
    <h4 class="faqOuter">Trial One Bar</h4>
    <div class="faqInner">
      <p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
    </div>
  </div>
  <div class="faqSectionSub">
    <h4 class="faqOuter">Trial One Bar</h4>
    <div class="faqInner">
      <p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
    </div>
  </div>
  <div class="faqSectionSub">
    <h4 class="faqOuter">Trial One Bar</h4>
    <div class="faqInner">
      <p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil expetendis in mei.</p>
    </div>
  </div>
  <script src="scripts.js"></script>

有没有办法一次只显示一个框？

Answer 1

尝试使用 JqueryUI 的 Accordion ，

https://jqueryui.com/accordion/

可折叠内容选项对您来说是更好的选择， https://jqueryui.com/accordion/#collapsible