如何在不新增HTML的情况下单独切换Knockout foreach生成的Div？

嘿，我一眼就看出问题所在啦——你现在用了一个全局的showCategory可观察对象来控制所有分类的内容显示，所以不管点哪个分类，所有内容都会跟着切换。咱们得给每个分类单独配一个“开关”才行，具体改法如下：

1. 给每个分类添加独立的显示状态属性 #

首先，你需要给categories数组里的每一个分类对象，添加一个专属的可观察属性来控制它的内容显示/隐藏。如果是初始化时定义的分类，直接添加；如果是动态获取的，遍历数组补上即可：

// 假设你的categories是这样的（示例结构，根据实际数据调整）
self.categories = ko.observableArray([
  { 
    categoryName: "Campaign", 
    reports: reportFilters.filter(r => r.Text === "Campaign"),
    isVisible: ko.observable(false) // 新增专属显示状态
  },
  { 
    categoryName: "Team", 
    reports: reportFilters.filter(r => r.Text === "Team"),
    isVisible: ko.observable(false)
  },
  // 剩下的分类同理...
]);

// 如果是动态加载的分类，用遍历添加：
// self.categories().forEach(category => {
//   category.isVisible = ko.observable(false);
// });

2. 修改切换方法，操作当前分类的状态 #

把原来的toggleVisibility方法改成操作当前点击的分类的isVisible属性，而不是全局的showCategory：

self.toggleVisibility = function(currentCategory) {
  // 直接切换当前分类的显示状态
  currentCategory.isVisible(!currentCategory.isVisible());
};

3. 调整HTML绑定，关联分类自身的状态 #

把内容区域的visible绑定从全局的$root.showCategory改成当前分类的isVisible，同时可以优化图标显示，根据状态切换箭头方向：

<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" >
                <!-- 根据当前分类的isVisible切换箭头图标 -->
                <i class="fas" data-bind="css: isVisible() ? 'fa-chevron-up' : 'fa-chevron-down'"></i> 
                <span class="report-category-name" data-bind="text: categoryName"></span>
            </span>
        </li>
        <!-- 绑定当前分类的isVisible属性 -->
        <li id="panel" class="report-category-container" data-bind="foreach: reports, visible: isVisible">
            <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>

这样修改后，每个分类都有自己独立的显示状态，点击某个分类标题时，只会切换该分类下的内容显示/隐藏，不会影响其他分类啦～

内容的提问来源于stack exchange，提问作者codeflower