Ionic 3实现点击新项时自动关闭手风琴列表已展开项

你已经搭建好了基础的分类折叠面板功能，现在只需要补上「单一展开」的逻辑就能解决问题——当前代码仅切换了点击项的展开状态，没有处理其他已打开的项，咱们来修改toggleSection方法就能搞定：

问题根源 #

你的toggleSection方法目前只翻转了当前点击项的open属性：

toggleSection(i,id) {
  this.cllapi(id);
  this.information[i].open = !this.information[i].open;
}

这就导致点击新项时，之前展开的项不会自动关闭，因为它们的open状态依然是true。

解决方案 #

修改toggleSection方法，在切换当前项状态前，先将所有其他项的open设为false，确保同一时间只有一个项处于展开状态：

toggleSection(i, id) {
  // 先记录当前项的展开状态
  const isCurrentlyOpen = this.information[i].open;

  // 第一步：关闭所有已展开的项
  this.information.forEach(item => {
    item.open = false;
  });

  // 第二步：切换当前项的状态（之前关就打开，之前开就保持关闭）
  this.information[i].open = !isCurrentlyOpen;

  // 优化：只有打开当前项时才请求子分类，避免关闭时重复调用API
  if (this.information[i].open) {
    this.cllapi(id);
  }
}

完整修改后的关键代码片段 #

// ... 其他原有代码保持不变 ...

toggleSection(i, id) {
  const isCurrentlyOpen = this.information[i].open;

  // 遍历关闭所有项
  this.information.forEach(item => {
    item.open = false;
  });

  // 切换当前项的展开状态
  this.information[i].open = !isCurrentlyOpen;

  // 仅在打开项时加载对应子分类
  if (this.information[i].open) {
    this.cllapi(id);
  }
}

// ... 其他原有代码保持不变 ...

这样修改后，你点击任何新的分类项时，之前展开的项都会自动关闭，同时当前项会展开并加载对应的子分类，完全符合你的需求。

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