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

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 Accordion 并想了解它的实际工作原理，那就是这样的

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

隐藏它

对于 JQ

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

当您点击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>