手风琴组件问题：切换时展开/折叠箭头无法正确调整

I'm developing an accordion feature for my company website to display product features and advantages interactively. I've implemented arrow direction switching when expanding/collapsing, but there's a functional anomaly:

• Single accordion works perfectly when clicked repeatedly, arrows match expand/collapse states correctly.
• When switching between different accordions:
  • Clicking an adjacent accordion to the current one: expand/collapse works, but the arrow state doesn't sync.
  • Clicking an accordion with one item in between: functions as expected.

There are 10 accordion components on the page. Below is the relevant code:

JS Code #

$('.body-container-wrapper').find('script:not(script[type="IN/Share"])').remove().end().wrapAll('<div id="site-wrapper"></div>');
$('.accordion-content').hide();
$('.expand .accordion-content').show();
$('.accordion-title').click(function(){
  $(this).closest('.hs_cos_wrapper_type_custom_widget').siblings().find('.accordion-content').slideUp();
  $(this).closest('.hs_cos_wrapper_type_custom_widget').siblings().find('.hs-accordion-wrapper').removeClass('expand');
  $(this).parent().addClass('expand');
  $(this).next().slideToggle(250);
  var title = $('.accordion-title');
  title.each(function(){
    $(this).click(function(){
      $(this).parent().toggleClass('expand');
    });
  });
});
}); // <-- Note: Extra closing bracket causing syntax errors

Accordion Module Code #

<div class="hs-accordion-wrapper clearfix {% if widget.expand %}expand{% endif %}">
  <div class="accordion-title">
    <h4>{{ widget.title }}</h4>
  </div>
  <div class="two-col-right-wrapper clearfix accordion-content">
    <div class="feature-text col1">
      <div class="feature-image">
        {% if widget.left_column_image.src %}
        <a title="{{ widget.left_column_image.alt }}" href="{{ widget.left_column_image.src }}" rel="lightbox">
          <img src="{{ widget.left_column_image.src }}" width="{{ widget.left_column_image.width }}" height="{{ widget.left_column_image.height }}" alt="{{ widget.left_column_image.alt }}">
        </a>
        {% endif %}
        <br> click the image above to view larger version
      </div>
    </div>
    <div class="feature-text col2">
      {{ widget.right_column_content }}
    </div>
  </div>
</div>

Let's break down what's causing this inconsistent behavior and fix it step by step:

Key Issues in Your Current Code #

1. Nested Click Event Binding: You're binding a new click event to all .accordion-title elements every time any title is clicked. This creates overlapping listeners that fire unpredictably, causing state mismatches.
2. Inconsistent State Management: You force-add the expand class to the current item before toggling its content, breaking sync between the class (which controls your arrow) and actual content visibility.
3. Syntax Error: The extra }); at the end of your JS code will prevent the script from running correctly.

Corrected JS Code #

$('.body-container-wrapper').find('script:not(script[type="IN/Share"])').remove().end().wrapAll('<div id="site-wrapper"></div>');

// Initialize accordion state
$('.accordion-content').hide();
$('.expand .accordion-content').show();

// Single click handler for all accordion titles
$('.accordion-title').click(function(){
  const $currentWrapper = $(this).closest('.hs-accordion-wrapper');
  const $allWrappers = $('.hs-accordion-wrapper');
  const isCurrentExpanded = $currentWrapper.hasClass('expand');

  // Step 1: Collapse all other accordions and reset their state
  $allWrappers.not($currentWrapper).removeClass('expand').find('.accordion-content').slideUp(250);

  // Step 2: Handle current accordion's state
  if (isCurrentExpanded) {
    // Collapse if already expanded
    $currentWrapper.removeClass('expand');
    $(this).next('.accordion-content').slideUp(250);
  } else {
    // Expand if collapsed
    $currentWrapper.addClass('expand');
    $(this).next('.accordion-content').slideDown(250);
  }
});

What Changed & Why #

• Removed Nested Event Binding: We only bind the click event once to all titles, eliminating conflicting triggers.
• Explicit State Checks: We first verify if the current accordion is expanded before acting, ensuring the expand class always matches content visibility.
• Unified Reset Logic: We target all other accordions at once to collapse them, guaranteeing consistent behavior no matter which item you click (adjacent or non-adjacent).
• Fixed Syntax Error: Removed the extra closing bracket that was breaking the script.

Additional Tips #

• Ensure your arrow styling is directly tied to the expand class (e.g., .hs-accordion-wrapper.expand .accordion-title::after { transform: rotate(180deg); }) to keep arrow state fully synced.
• Test with all 10 accordions to confirm consistent behavior across all items.

内容的提问来源于stack exchange，提问作者N. V.