如何使下面的框移动（手风琴）

Question

我真的不知道如何在标题中解释我的问题，我的问题是我怎么做到这一点当我按下顶部框时其他两个框向下移动以便你可以看到文字？对于其他两个盒子也是如此，如果我按下最后一个盒子的中间位置，当我按下最后一个盒子时顶部和中间停留。盒子必须回到原来的位置。我需要帮助

$(".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>

Answer 1

请参阅下面的代码段或jsfiddle

如果你不想使用jqueryUI手风琴并希望了解它是如何工作的，那就是这样的

CSS中的

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

隐藏它

表示JQ

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

当您点击faq-box（其中任何一个）时，在变量中（对于更干净和简洁的代码），您存储相应的faq-box-more。 您可以使用sibling()方法执行此操作。正在搜索.faq-box＆＃39;兄弟＆＃39;对于.faq-box-more。在HTML结构faq-box和faq-box-more处于同一级别，因此他们是兄弟姐妹

然后使用if条件检查先前选择的faq-box-more是否可见。如果是 - ＆gt;关闭它，如果没有 - ＆gt;打开IT。

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

然后，您还要查找之前打开的faq-box-more并关闭它们，因此一次只打开一个（与您单击的框对应的那个）。为此，您可以使用parents()方法来“攀爬”。启动HTML结构并转到faq，然后使用siblings()和find()找到.faq-box-more，如果它已打开，则使用slideUp()隐藏它

我认为您尝试了解accordion背后的流程并且不仅仅是复制粘贴它是非常重要的。

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

P.S。你的代码（CSS）中有很多问题，它试图纠正其中一些但我也不想改变你的代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;