在 Knockout foreach 循环中引导 4 手风琴，在展开/折叠问题时更改图标

Posted 2023-03-27

【中文标题】在 Knockout foreach 循环中引导 4 手风琴，在展开/折叠问题时更改图标

【英文标题】：Bootstrap 4 accordions inside Knockout foreach loop, change icon when expanded/collapse issue

【发布时间】：2019-10-26 03:46:09

【问题描述】：

我有一个父手风琴内的手风琴列表，例如：

<div id="parentAccordion" class="card-accordion">
        <div class="card">
            <div class="card-header bg-black text-white pointer-cursor">
                <div class="row">
                    <div style="font-size:16px">Custom - <span data-bind="text:$root.nameSelected"></span></div>
                </div>
            </div>
            <div id="parentBody" class="collapse show" data-parent="#parentAccordion" style="background-color: #d9e0e7">
                <!-- begin #accordion -->
                <div id="oAccordion" class="card-accordion">
                    <!-- begin card -->
                    <div class="card" data-bind="foreach:$root.fbolist">
                        <div style="padding: 3px">
                            <div class="card-header bg-black text-white pointer-cursor" data-toggle="collapse" data-bind="attr:  href: '#O'+CourseId(), title: cName ">
                                <i class="fa fa-caret-right"></i>
                                <span data-bind="text:cName">NAME</span>
                            </div>
                            <div class="collapse" data-bind="attr:'id':'O'+CourseId()" data-parent="#oBody">
                                <div class="card-body white text-justify">
                                    <!-- body here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

当展开到插入符号向下和折叠到插入符号右时，我正在尝试更改图标。一次只能展开子列表 (fbolist) 中的一个手风琴，折叠其他手风琴。 我用这个js来改变图标：

$('.collapse').on('shown.bs.collapse', function () 
$(this).parent().find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down");
).on('hidden.bs.collapse', function () 
    $(this).parent().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-right");
);

但它会更改 Knockout foreach 中其余手风琴的所有图标。 当只有一个扩展时，有没有办法不将所有图标更改为插入符号？它应该有这个图标只有扩展的一个，其他的插入符号右

【参考方案1】：

您可以创建一个自定义绑定处理程序以仅针对折叠/展开元素：

ko.bindingHandlers['collapse'] = 
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) 
        $(element).on('shown.bs.collapse', function () 
            $(element).parent().find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down");
        ).on('hidden.bs.collapse', function () 
            $(element).parent().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-right");
        );
    
;

然后应用到具有collapse 类的元素。

<div class="collapse" data-bind="attr:'id':'O'+CourseId(), collapse" data-parent="#oBody">
    <div class="card-body white text-justify">
        <!-- body here -->
    </div>
</div>

【参考方案2】：

$('.collapse').on('click',".pointer-cursor", function () 
    $(this).find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down");
    $(this).parents(".card").siblings().find(".fa-caret-down").attr("class", " fas fa-caret-right");
);

【讨论】：

其他的没有变回来。如果更改为 down 则保持不变

下次我会记住这一点。感谢您的反馈@L。 F.