Javascript 引导4个手风琴在每个循环的敲除内,在展开/折叠问题时更改图标
我在家长手风琴中有一个手风琴列表,如:Javascript 引导4个手风琴在每个循环的敲除内,在展开/折叠问题时更改图标,javascript,html,css,knockout.js,bootstrap-4,Javascript,Html,Css,Knockout.js,Bootstrap 4,我在家长手风琴中有一个手风琴列表,如: <div id="parentAccordion" class="card-accordion"> <div class="card"> <div class="card-header bg-black text-white pointer-cursor"> <div class="row"> &l
<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>
但它改变了所有的图标,其余的手风琴内敲foreach。
当只有一个图标展开时,有没有办法不将所有图标更改为插入符号向下?它应该只有展开的一个图标和其他插入符号右边的图标您可以创建一个自定义绑定处理程序,只针对正在折叠/展开的元素:
$('.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");
});
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>
其他的都没有变回。如果改为down,它仍然是sameI,我下次会记住这一点。感谢您的反馈@L.F。
<div class="collapse" data-bind="attr:{'id':'O'+CourseId()}, collapse" data-parent="#oBody">
<div class="card-body white text-justify">
<!-- body here -->
</div>
</div>