如何在Javascript中为手风琴菜单添加滑动效果？

Question

我正在创建一个手风琴菜单，单击它即可上下滑动。我能够获得该功能，但无法获得在显示和隐藏菜单内容时从上到下和从下到上平滑滑动的动画效果。

我尝试过像slideUP()和slideDown()这样的jQuery函数，但我想通过javascript来实现它。 这是我的代码..

let k = 0;
let rightArrow = $(".fa-arrow-down");
$(".accordian-hover").click(() => {

  if (k == 0) {
    $(".accordian-content").show();
    k = 1;
    rightArrow.toggleClass("fa-arrow-down fa-arrow-up");
  } else {
    $(".accordian-content").hide();
    k = 0;
    rightArrow.toggleClass("fa-arrow-up fa-arrow-down");

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordian-wrapper">
  <div class="accordian-hover d-flex flex-row justify-content-center align-items-center container">
    <div id="accordian-question-div">
      <h5>How to use this product ?</h5>
    </div>
    <div>
      <i class="fa fa-solid fa-arrow-down"></i>
    </div>
  </div>
  <div class="accordian-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt iste est sunt? Excepturi quas, sunt recusandae laboriosam eligendi cum autem. Tempora nulla, at sequi minima praesentium, explicabo ullam eius odio corporis optio autem pariatur consequuntur,
      rem voluptate soluta exercitationem natus quod repudiandae. Reprehenderit vitae, iste facere aspernatur minima modi repellat!</p>
  </div>

</div>

Answer 1

您需要使用“slideDown”、“slideUp”

let k = 0;
let rightArrow = $(".fa-arrow-down");
$(".accordian-hover").click(() => {

  if (k == 0) {
    $(".accordian-content").slideDown();
    k = 1;
    rightArrow.toggleClass("fa-arrow-down fa-arrow-up");
  } else {
    $(".accordian-content").slideUp();
    k = 0;
    rightArrow.toggleClass("fa-arrow-up fa-arrow-down");

  }
});

.accordian-content p{
  margin-top:0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordian-wrapper">
  <div class="accordian-hover d-flex flex-row justify-content-center align-items-center container">
    <div id="accordian-question-div">
      <h5>How to use this product ?</h5>
    </div>
    <div>
      <i class="fa fa-solid fa-arrow-down"></i>
    </div>
  </div>
  <div class="accordian-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt iste est sunt? Excepturi quas, sunt recusandae laboriosam eligendi cum autem. Tempora nulla, at sequi minima praesentium, explicabo ullam eius odio corporis optio autem pariatur consequuntur,
      rem voluptate soluta exercitationem natus quod repudiandae. Reprehenderit vitae, iste facere aspernatur minima modi repellat!</p>
  </div>

</div>