JQuery實作 — 列表收合

HTML 結構

<div id="qa" class="question">
    <div class="hero-yellow-md">
      <div class="title-group">
        <h2 class="title">常見問題</h2>
        <h3 class="subtitle">Q&A</h3>
      </div>
      <div class="question-container">
        <div class="question__box">
          <div class="question__item">
            <div class="icon__title">
              <i class="fa-solid fa-q"></i>
            </div>
            <h3 class="subject">如何繳費呢?</h3>
            <div class="icon__box">
              <div class="circle">
                <i class="fa-solid fa-chevron-left"></i>
              </div>
            </div>
          </div>
          <div class="question__answer">
            <div class="icon__title">
              <i class="fa-solid fa-quote-left"></i>
            </div>
            <p class="subject">可用行動支付或是ATM匯款</p>
            <div class="icon__title">
              <i class="fa-solid fa-quote-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

jQuery 寫法

$( document ).ready(function() {
  $("#qa").on("click", function (event) {
    const target = event.target
    if ($(target).hasClass("subject")) {
        $(target).parent().siblings(".question__answer").slideToggle("300");
        $(target).parent().siblings(".question__answer").css("display","flex");
        $(target).siblings().children(".circle").toggleClass("active");
    } else if($(target).hasClass("fa-chevron-left")) {
        $(target).parent().parent().parent().siblings(".question__answer").slideToggle("300");
        $(target).parent().parent().parent().siblings(".question__answer").css("display","flex");
        $(target).parent(".circle").toggleClass("active");
    } else if($(target).hasClass("circle")) {
        $(target).parent().parent().siblings(".question__answer").slideToggle("300");
        $(target).parent().parent().siblings(".question__answer").css("display","flex");
        $(target).toggleClass("active");
    }
  });
});