限制可见数量

Question

我创建了Q＆amp; A部分，其中包含几个垂直堆叠在一起的盒子。我发现如果我要打开所有的框，页面就不合适了，所以我想知道是否可以使用jQuery的JavaScript来限制active框的数量。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

从JqueryUI尝试Accordion，

https://jqueryui.com/accordion/

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

Answer 2

您拥有的JavaScript将在点击时打开内部div。您只需要以下行来隐藏所有内部框。将display设置为none会折叠（隐藏）所有可见的div。

  $(".faqInner").css("display","none");

这是你的document.ready函数应该是这样的：

$(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';
    }
  });
  $(".faqInner").css("display","none");
});