javascript - 在 Knockout foreach 循环中引导 4 手风琴,在展开/折叠问题时更改图标
问题描述
我在父手风琴中有一个手风琴列表,例如:
<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 中其余手风琴的所有图标。有没有办法在只有一个扩展时不将所有图标更改为插入符号?它应该只有扩展的图标和其他的插入符号右
解决方案
您可以创建一个自定义绑定处理程序以仅针对折叠/展开元素:
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>
推荐阅读
- r - 为什么我的固定效应模型中不能包含国家虚拟变量?
- jquery-selectors - 用于父输入文本的 Jquery 选择器
- maven - SonarQube 覆盖率始终为 0
- python - 这个迭代循环如何拟合模型?(机器学习)
- python - 不明白我的宾果游戏模拟器中 TypeError 的原因
- powershell - 如何使用 PowerShell 编辑 HKCU 值
- c# - 带参数的自定义组件 Xamarin 绑定命令
- csv - 添加 csv 的第一行作为节点类型的属性 - Neo4J
- sql - 时间戳 SQL 中具有特定小时和分钟的条件
- laravel - Laravel:BroadcastWhen 等价于事件