手风琴式FAQ布局：点击问题div切换箭头图标技术问询

没问题，我来帮你搞定每个FAQ项的箭头切换效果！你只需要在现有的jQuery点击事件里，添加针对当前问题项内图标的类切换逻辑就行。

修改后的核心jQuery代码 #

原来的代码已经实现了答案的显示/隐藏，现在只需要在点击事件中，定位到当前问题项里的箭头图标，切换它的方向类：

$(document).ready(function() {
  $(this).on("click", ".koh-faq-question", function() {
    // 切换对应答案的显示/隐藏
    $(this).parent().find(".koh-faq-answer").toggle();
    // 切换当前问题项的箭头图标方向
    $(this).find("i.fa").toggleClass("fa-chevron-right fa-chevron-down");
  });
});

完整可运行代码示例 #

这里是整合后的完整代码，包含多个FAQ项的演示：

<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>
<style>
.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; 
  margin-left: 20px;
  padding: 10px 0;
}
.koh-faq-question {
  cursor: pointer;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.icon { 
  font-size: 10px; 
  padding-right: 5px; 
}
</style>
<div class="koh-tab-content">
  <div class="koh-tab-content-body">
    <h2 class="koh-faqs-page-title">FAQ 常见问题</h2>
    <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 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 2 </span>
      </div>
      <div class="koh-faq-answer"> Test Answer 2 </div>
    </div>
    <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 3 </span>
      </div>
      <div class="koh-faq-answer"> Test Answer 3 </div>
    </div>
  </div>
</div>

关键逻辑说明 #

• $(this).find("i.fa")：精准定位到当前被点击的问题项里的Font Awesome图标，确保只操作当前项的箭头，不会影响其他FAQ项的状态。
• toggleClass("fa-chevron-right fa-chevron-down")：这个方法会自动切换两个类的存在状态——如果当前图标是向右的箭头，就移除fa-chevron-right并添加fa-chevron-down；再次点击则反向切换，完美实现箭头方向和答案显示状态的同步。

这样每个FAQ项的箭头都会独立响应点击，和答案的展开/收起完全同步啦！

内容的提问来源于stack exchange，提问作者Ramji Seetharaman