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

一种方法是调整标记以包含包含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>