jquery - 在 Accordion 内部时如何更新 CarouFredsel 的大小？

Question

我正在使用 jquery Accordion 来隐藏/显示内容。当内容在 Accordion 中展开时 - 轮播被隐藏(如果 Accordion 设置为默认打开，轮播将按预期显示)。

我的问题在选项卡方面似乎与此类似:

Carofredsel and jQuery UI tabs elements hidden

我尝试在我的 Accordion 调用中应用他们的建议，但这不起作用(当 Accordion 展开/打开时，轮播仍然不显示/调整大小):

$( ".dnd-accordion" ).accordion({
    collapsible: true,
    active: true,
    heightStyle: "content",
    create: function( event, ui ) {
        var expanded = $(this).data("expanded");
        if(expanded===0){
            expanded = true;
        }
        else{
            expanded = expanded-1;
        }
        $(this).accordion( "option", "active", expanded);
    },
    $(this).click(function () {
        $('.dnd-carousel').trigger('updateSizes');
    }, 

});

我也尝试过这个，同样的事情，不起作用:

$(".dnd-accordion .accordion-heading").click(function () {
    $('.dnd-carousel').trigger('updateSizes');
}); 

知道我做错了什么，或者是否有更正确的解决方案？

编辑:

这是 html -

<div class="dnd-accordion dnd-toggle" data-expanded="0">
    <!-- ... accordion toggle content ...  -->

    <div class="dnd-accordion-body">
        <div class="dnd_container">
            <!-- ... accordion body content ...  -->

            <div class="dnd-carousel" data-autoplay="1" data-items="1" data-effect="scroll" data-easing="linear" data-duration="500">
                <ul>
                    <li><img src="<!-- /path/to/image/ -->" alt=""></li>
                    <li><img src="<!-- /path/to/image/ -->" alt=""></li>
                    <li><img src="<!-- /path/to/image/ -->" alt=""></li>
                    <li><img src="<!-- /path/to/image/ -->" alt=""></li>
                    <li><img src="<!-- /path/to/image/ -->" alt=""></li>
                    <li><img src="<!-- /path/to/image/ -->" alt=""></li>
                    <li><img src="<!-- /path/to/image/ -->" alt=""></li>
                    <li><img src="<!-- /path/to/image/ -->" alt=""></li>
                    <li><img src="<!-- /path/to/image/ -->" alt=""></li>
                </ul>
            </div><!-- [END] .dnd-carousel -->

        </div><!-- [END] .dnd_container -->
    </div><!-- [END] .dnd-accordion-body -->

</div><!-- [END] .dnd-accordion -->

Answer 1

我不确定这是否能 100% 工作，我遇到了类似的问题，这成功了

$(".dnd-accordion").on('click', '.accordion-heading', function () {
    $('.dnd-carousel').find('ul').trigger('updateSizes');
});

现在让我担心的部分是'.accordion-heading'，如果它不起作用，请尝试'.ui-accordion-header'。