Bootstrap 4 аккордеона в цикле Knockout foreach, меняйте значок при расширении / развале - PullRequest
Новая
       24

Bootstrap 4 аккордеона в цикле Knockout foreach, меняйте значок при расширении / развале

0 голосов
/ 11 июня 2019

У меня есть список аккордеонов внутри родительского аккордеона, например: 

<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. Есть ли способ не менять все значки на выносные, когда развернут только один? Этот значок должен иметь только развернутый значок, а остальные должны быть справа

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Вы можете создать собственный обработчик привязки, чтобы нацеливаться только на сворачивающийся / расширяющийся элемент: 

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>
0 голосов
/ 11 июня 2019 
$('.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");
});
...