Question

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

当我点击另一支手风琴（例如我点击的原始手风琴下方的手风琴）时，展开/折叠工作，但箭头不会调整以反映手风琴功能的状态（例如箭头没有降）。
当我点击原手风琴下方两个位置的手风琴时，功能似乎可以正常工作。因此，已经设置的几个手风琴并不一致。例如，我在我正在处理的页面上设置了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（'click'，function（）{

html {
  height: 100%;
  background: linear-gradient(to right,white 30%,red 0);
}

body {
  height: 100%;
  margin: 0 auto;
  background-image: url(https://lorempixel.com/1000/1000/);
  background-size: calc(70% - 30px) calc(100% - 60px);
  background-position: calc(100% - 30px) 30px;
  background-repeat: no-repeat;
}

}）;

的CSS：

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

.active：在{

之后

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

}

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

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

1 个答案: