javascript - ターゲットの div よりも多くのアコーディオン トグルが折りたたまれる

Question

現在のコードでは、文字を折りたたもうとすると、文字ヘッダー内のすべての div を折りたたむ必要があるときに、コンテンツの最初の div が折りたたまれます。JavaScript を変更して div 内の div を適切に折りたたむ方法がわかりません。

<div class="accordion-group" data-bind="foreach: Types">
    <div class="text_x-large header"> <span data-bind="text:Name()"></span> 
    </div>
    <div class="testing" data-bind="foreach: Users">
        <!-- ko if: Letter -->
        <div class="text_x-large letterHeader list_accordion_toggle" data-bind="visible: $parent.ShowLetter(), text: Letter"></div>
        <!-- /ko -->
        <div class="type_list_item smoke_hover" data-bind="template: { name: 'list'}"></div>
    </div>
</div>

JavaScript

$(document).on('click', '.list_accordion_toggle', function (event) {
    $(this).toggleClass('type_list_item collapse').next().toggle();
});

Answer 1

1 つの方法は、マークアップを調整して包含DIV要素を含めることです。そのように：jsFiddle

編集：

Knockout では独自のマークアップを設定できるため、次のように変更できるはずです。

<div class="accordion-group" data-bind="foreach: Types">
<div class="text_x-large header"> <span data-bind="text:Name()"></span> 
</div>
<div class="testing" data-bind="foreach: Users">
    <!-- ko if: Letter -->
    <div class="text_x-large letterHeader list_accordion_toggle" data-bind="visible: $parent.ShowLetter(), text: Letter"></div>
    <!-- /ko -->
    <div class="wrapper">
        <div class="type_list_item smoke_hover" data-bind="template: { name: 'list'}"></div>
    </div>
</div>
</div>