javascript - 如何使下面的框移动( Accordion )

真的不知道该如何在标题中解释我的问题，我的问题是如何做到这一点，所以当我按顶部框时，其他两个框向下移动以便可以看到文本？其他两个方框也一样，如果我按下中间的那个，最后一个方框会移动，而当我按下最后一个的那个方框时，顶部和中间会停留。再加上盒子必须回到原来的位置。请为此我需要帮助

$(".faq,.faq2,.faq3").click(function() {
  $(this).find(".faq-box-more").toggleClass("open");

  $(".faq,.faq2,.faq3").not(this).find(".faq-box-more").removeClass("open");
});

.faq,
.faq2,
.faq3 {
  height: 100px;
  width: 500px;
  background: red;
  position: relative;
  top: 100px;
  left: 50%;
  transform: translate(-50%, 0%);
}

.faq-box {
  position: relative;
  height: 100%;
  width: 100%;
  background: #333;
  cursor: pointer;
  padding: 0 20px;
}

.faq-box h2 {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.9rem;
}

.faq-box i {
  position: absolute;
  left: 96%;
  top: 50%;
  font-size: 3rem;
  transform: translate(-100%, -50%);
  color: #fff;
}

.faq-box-more {
  position: absolute;
  height: 0%;
  top: 100%;
  background-color: #222;
  color: #fff;
  width: 100%;
}

.faq-box-more p {
  position: absolute;
  width: 100%;
  padding: 20px;
}

.open {
  height: 140% !important;
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  <div class="faq">
    <div class="faq-box">
      <h2>lorem ipsum</h2>
      <i class="ion-ios-arrow-down"></i>
    </div>
    <div class="faq-box-more">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
    </div>
  </div>
  <div class="faq2">
    <div class="faq-box">
      <h2>lorem ipsum</h2>
      <i class="ion-ios-arrow-down"></i>
    </div>
    <div class="faq-box-more">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
    </div>
  </div>
  <div class="faq3">
    <div class="faq-box">
      <h2>lorem ipsum</h2>
      <i class="ion-ios-arrow-down"></i>
    </div>
    <div class="faq-box-more">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
    </div>
  </div>
</section>

最佳答案

请参见下面的摘录或jsfiddle

如果您不想使用jqueryUI手风琴，并且想了解它的实际工作原理，那么就像这样

CSS中不要在faq-box-more上使用绝对定位，因为它不会占用任何空间。而是用display:none隐藏它

对于JQ

首先，您不需要向所有faq div添加不同的类，可以添加一个通用类，然后使用下面的jQuery方法选择与您单击的常见问题解答相关的各个faq-box-more

当单击faq-box（它们之一）时，将在一个变量中（用于简洁明了的代码）存储相应的faq-box-more。
您可以使用sibling()方法执行此操作。在.faq-box的'兄弟'中搜索.faq-box-more。 HTML结构faq-box和faq-box-more处于同一级别，因此它们是同级

然后使用if条件检查先前选择的faq-box-more是否可见。如果是->关闭它，如果不是->打开它。

您使用slideUp()和slideDown()方法关闭和打开（单击方法以查看有关它们的更多信息）

然后，您还希望找到任何先前打开的faq-box-more并将其关闭，因此一次只能打开一个（对应于您单击的框）。为此，您可以使用parents()方法来“爬升” HTML结构并进入faq，然后使用siblings()和find()找到.faq-box-more，如果它是打开的，则将其隐藏与slideUp()

我认为，重要的是您尝试理解accordion背后的过程，而不仅仅是复制粘贴它。

如果您对此主题还有任何疑问，请随时在评论中提问

附言您的代码（CSS）中有很多问题，它试图纠正其中的一些问题，但是我也不想改变太多代码。

$(".faq-box").on("click",function() {
  var boxMore =  $(this).siblings(".faq-box-more")
   if ($(boxMore).is(":visible")) {
	  $(boxMore).slideUp()
	} else {
	 $(boxMore).slideDown(500)
	}


  $(this).parents(".faq").siblings().find(".faq-box-more").slideUp()
});

.faq {
  width: 500px;
  background: red;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
}

.faq-box {
  position: relative;
  height: 100%;
  width: 100%;
  background: #333;
  cursor: pointer;
  padding: 0 20px;
}

.faq-box h2 {



  color: #fff;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 1.9rem;
}

.faq-box i {
  position: absolute;
  left: 96%;
  top: 50%;
  font-size: 3rem;
  transform: translate(-100%, -50%);
  color: #fff;
}

.faq-box-more {
  background-color: #222;
  color: #fff;
  width: 100%;
	height:200px;
	display:none;
}

.faq-box-more p {
  position: absolute;
  width: 100%;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="faq">
    <div class="faq-box">
      <h2>lorem ipsum</h2>
      <i class="ion-ios-arrow-down"></i>
    </div>
    <div class="faq-box-more">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
    </div>
  </div>
  <div class="faq">
    <div class="faq-box">
      <h2>lorem ipsum</h2>
      <i class="ion-ios-arrow-down"></i>
    </div>
    <div class="faq-box-more">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
    </div>
  </div>
  <div class="faq">
    <div class="faq-box">
      <h2>lorem ipsum</h2>
      <i class="ion-ios-arrow-down"></i>
    </div>
    <div class="faq-box-more">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
    </div>
  </div>
</section>