如何实现FAQ手风琴组件点击同一头部时的展开/关闭切换功能？

我正在开发一个FAQ手风琴模块，用户点击问题卡片可展开查看对应答案。目前已实现点击展开功能，但存在问题：点击同一已展开的手风琴头部时，无法关闭该卡片。需要修改JavaScript代码，实现点击时切换active类来完成关闭功能。

相关代码 #

HTML（仅展示核心部分） #

<div class="condensed-faq-accordion-container" style="background:white;">
  <div class="container">
    <div class="row" style="display:flex;align-items: center;width: 100%;gap:100px;justify-content:space-evenly;">
      <div class="condensed-faq-accordion-left">
        {% inline_rich_text field="pricing_accordion_left_content" value="{{ module.pricing_accordion_left_content }}",no_wrapper=true %}
      </div>
      <div class="condensed-faq-accordion-right">
        <div class="mobile-condensed-faq-accordion">
          <div class="condensed-faq-accordion-outer-wrapper">
            {% for item in module.pricing_tile %}
            <div class="condensed-faq-accordion-fold">
              <div class="condensed-faq-top-accordion">
                <div class="condensed-faq-top-accordion-inner">
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS #

.condensed-faq-accordion-container {
  background: linear-gradient(162.07deg, #0D4EB5 -9.9%, #1D0254 70.87%, #1D0254 93.21%);
  padding: 80px 120px;
  height:682px;
  align-items: center;
  display:flex;
} 

.condensed-faq-accordion-left {
  max-width: 417px;
  margin-top:-20px;
}

.mobile-condensed-faq-accordion {
  display: block;
  width: 100%;
  border-radius: 20px;
}

.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold:nth-child(1) .condensed-faq-top-accordion,
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold:nth-child(1)  {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-top-accordion {
  background: #1D0254;
  transition: all .3s;
}
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-top-accordion h3 {
  color: #FFF;
}
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
  background: #F5F5F5;
}
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
  height: 0px;
  overflow: hidden;
  transition: all .3s;
}
.mobile-condensed-faq-accordion .condensed-faq-accordion-outer-wrapper .condensed-faq-accordion-fold.active .condensed-faq-bottom-accordion .condensed-faq-bottom-accordion-outer {
  height: auto;
  padding: 20px 32px;
}

原JavaScript代码 #

$('.condensed-faq-accordion-fold').click(function(){
  $('.condensed-faq-accordion-fold').removeClass('active');
  $('.condensed-faq-top-accordion-inner img').attr('src','https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg');
  $(this).addClass('active');
  $(this).find('.condensed-faq-top-accordion-inner img').attr('src','https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-up-yellow.svg');
})

解决方案 #

原代码的问题在于：不管当前点击的手风琴项是否已经处于active状态，都会先移除所有项的active类，再给当前项添加active类，导致无法触发关闭操作。

修改后的JavaScript代码如下，核心逻辑是先判断当前项的状态，再决定是关闭还是展开：

$('.condensed-faq-accordion-fold').click(function(){
  const $currentItem = $(this);
  const $allItems = $('.condensed-faq-accordion-fold');
  const $allArrows = $('.condensed-faq-top-accordion-inner img');
  const closeArrowSrc = 'https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-down-purple.svg';
  const openArrowSrc = 'https://2082317.fs1.hubspotusercontent-na1.net/hubfs/2082317/ContractSafe%202023/Icons/arrow-up-yellow.svg';

  if ($currentItem.hasClass('active')) {
    // 当前项已展开，执行关闭操作
    $currentItem.removeClass('active');
    $currentItem.find('.condensed-faq-top-accordion-inner img').attr('src', closeArrowSrc);
  } else {
    // 当前项未展开，先重置所有项，再执行展开操作
    $allItems.removeClass('active');
    $allArrows.attr('src', closeArrowSrc);
    $currentItem.addClass('active');
    $currentItem.find('.condensed-faq-top-accordion-inner img').attr('src', openArrowSrc);
  }
})

逻辑说明 #

1. 点击手风琴项时，先检查该项是否带有active类：
   • 若有：移除active类，切换箭头为向下的关闭状态，实现当前卡片关闭。
   • 若无：先将所有手风琴项重置为关闭状态，再给当前项添加active类，切换箭头为向上的展开状态。

这样既保留了“点击其他项关闭当前展开项”的功能，又实现了“点击当前展开项可关闭”的需求。

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