javascript - 单击 div 向右和向上切换箭头

Question

我正在设计类似 Accordion 的布局，并希望在我单击 div 时切换显示的箭头图标。我能够切换 div 的内容。我想对箭头图标做同样的事情。

这是我到目前为止尝试过的。

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
  });
});

.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>

我希望在单击问题时将右图标切换为向下图标。当我再次单击时，它应该切换回左侧图标。由于这是一个常见问题解答页面，我会有多个问题和答案。所以我想为每个人做。

Answer 1

您可以在 .fa 上切换事件类以使用动画旋转图标。

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    $(this).parent().find(".koh-faq-answer").toggle();
    $(this).find(".fa").toggleClass('active');
  });
});

.koh-faqs-page-title {
  font-family: Nexa W01 Heavy;
  font-size: 30px;
  color: #04202E;
  font-weight: 700;
}

.koh-faq-question-span {
  font-family: Helvetica Neue LT Pro Roman !important;
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: inline-block;
}

.koh-faq-answer {
  font-family: Helvetica Neue LT Pro Roman;
  color: #000;
  font-weight: 400;
  display: none;
}

.icon {
  font-size: 10px;
  padding-right: 5px;
}

.fa {
  transition: transform .2s;
}

.fa.active {
  transform: rotateZ(90deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <div class="koh-faq">
      <div class="koh-faq-question">
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <span class="koh-faq-question-span"> Test Question 1 </span>
      </div>
      <div class="koh-faq-answer">
        Test Answer 1
      </div>
    </div>
  </div>
</div>