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

Question

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

当我单击另一个手风琴(例如，我单击的原始手风琴下方的手风琴

1. )时，展开/折叠有效，但箭头不会调整以反映手风琴功能的状态(例如，箭头不会下降)。

2. 当我单击比原始手风琴低两个位置的手风琴时，功能似乎可以按预期工作。因此，它在已设置的几个手风琴中不一致。例如，我在正在处理的页面上设置了 10 个手风琴.

任何人都可以帮助为什么会发生这种情况，以及我的代码中缺少什么？JS，CSS和手风琴模块代码如下：

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

});

手风琴模块代码：手风琴图像

<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 .selectdiv").on('click'， 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);

}

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