Javascript 如何在不添加更多html的情况下单独切换淘汰foreach div？

我使用foreach方法在可观察数组中创建标记foreach项以创建树视图。 输出示例

类别名称1 所容纳之物 所容纳之物 类别名称2 所容纳之物 内容

当我单击类别名称时，我只希望其内容显示/隐藏，当前当我单击类别名称时，它显示并隐藏所有类别

 var reportFilters = [
        { Text: "Campaign", Value: primaryCategories.Campaign },
        { Text: "Team", Value: primaryCategories.Team },
        { Text: "Agent", Value: primaryCategories.Agent },
        { Text: "List", Value: primaryCategories.List },
        { Text: "Inbound", Value: primaryCategories.Inbound },
        { Text: "Daily", Value: primaryCategories.Daily },
        { Text: "Services", Value: primaryCategories.Services },
        { Text: "Occupancy", Value: primaryCategories.Occupancy },
        { Text: "Data", Value: primaryCategories.Data }
    ];


  self.showCategory = ko.observable(false);      
    self.toggleVisibility = function (report) {
        var categoryName = report.PrimaryReportCategory;
        var categoryContent = report.ID;
        if (categoryName == categoryContent ) {
            self.showCategory(!self.showCategory());
        };
    }
  <div class="report-category-treeview"  data-bind="foreach: $root.categories, mCustomScrollBar:true">
            <ul class="column-list" >
                <li class="report-category-heading" data-bind="click: $root.toggleVisibility"><span class="margin-top10" ><i class="fas fa-chevron-down"></i> <span class="report-category-name" data-bind="text: categoryName"></span></span></li>
                <li id="panel" class="report-category-container" data-bind="foreach: reports, visible: $root.showCategory">
                    <div class="column-list-item" data-bind="click: $root.report_click, css: { 'selected': typeof $root.selectedReport() != 'undefined' && $data == $root.selectedReport() }">
                        <span class="column-list-text" data-bind="text: ReportName"></span>
                    </div>
                </li>
            </ul>
        </div>

var报告过滤器=[
{文本：“活动”，值：primaryCategories.Campaign}，
{文本：“团队”，值：primaryCategories.Team}，
{Text:“Agent”，值：primaryCategories.Agent}，
{文本：“列表”，值：primaryCategories.List}，
{Text:“Inbound”，值：primaryCategories.Inbound}，
{文本：“每日”，值：primaryCategories.Daily}，
{文本：“服务”，值：primaryCategories.Services}，
{文本：“占用”，值：primaryCategories.occulation}，
{文本：“数据”，值：primaryCategories.Data}
];
self.showCategory=ko.可观察（假）；
self.toggleVisibility=功能（报告）{
var categoryName=report.PrimaryReportCategory；
var categoryContent=report.ID；
if（categoryName==categoryContent）{
self.showCategory（！self.showCategory（））；
};
}

当前，当我单击类别名称时，它会显示并隐藏所有 类别

这是因为

showCategory

是你唯一负责显示\隐藏的可观察对象。您真正想要的是每个类别一次显示\隐藏可观察

我不确定您的整个数据模型是什么样子的，但是由于您特别询问了

类别

，那么您应该创建一个

类别

视图模型，可能还有一些容器视图模型，我将在这里命名为

主视图

：

var categoryVM = function (name) {
    var self = this;
    self.name = ko.observable(name);
    self.isVisible = ko.observable(false);
    self.toggleVisibility = function () {
        self.isVisible(!self.isVisible());
    }
    // ... add here your other observables ...
}

// name 'masterVM' whatever you like
var masterVM = function () {
    var self = this;
    self.categories = ko.observables([]);
    // ... probably add here other observables, e.g. 'reports' ...
    self.init = function (rawCategories) {
        rawCategories.forEach(function (item) {
            categories.push(new categoryVM(item.name)); // replace 'name' with your property
        }
    }
}

var master = new masterVM();
master.init(getCategories()); // pass in your categories from wherever they come from
ko.applyBindings(master);

然后，在html中，这将是您的外部

foreach

：

<div class="report-category-treeview" data-bind="foreach: categories ... />

<li class="report-category-heading" 
    data-bind="click: toggleVisibility">
<li id="panel" class="report-category-container" 
    data-bind="foreach: $root.reports, visible: isVisible">