Accordion - 单击时自动切换展开/折叠箭头未正确调整

Question

我正在为我公司的网站开发手风琴功能，以便在我们的网页上以交互方式展示功能/优势。我已经取得了一些进展，当手风琴展开/折叠时，箭头确实向下移动到一边。但是，我遇到了许多使其正常运行的问题。当我单击并重新单击单个手风琴时，它可以完美运行，这意味着箭头会在展开/折叠时向下并偏向一边。但是，当我从一个手风琴转到另一个手风琴时，我遇到了许多问题。

1. 当我单击另一个手风琴时（例如，我单击的原始手风琴下方的手风琴），展开/折叠工作，但箭头没有调整以反映手风琴功能的状态（例如，箭头没有下降）。

2. 当我单击位于原始手风琴下方两个位置的手风琴时，该功能似乎可以正常工作。因此，它在已设置的几个手风琴之间并不一致。例如，我正在处理的页面上有 10 个手风琴设置。

谁能帮助解释为什么会发生这种情况，以及我的代码中缺少什么？ JS、CSS 和 Accordion 模块代码如下：

JS：

$('.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');
    });
   });        
});

});

手风琴模块代码：accordion image

<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>

Answer 1

$(“.variation_form_section .select div”).on(‘点击’, function() {

   $(this).addClass(‘active’).siblings().removeClass(‘active’);

});

css:

默认隐藏内容并在添加活动类时显示它。 添加活动类时的下拉列表

.active:{

之后

color: #ACD4CE;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);

}

如果您需要什么，请告诉我。