修改可展开表格：实现首行在页面加载时保持收起

我修改了一个可展开表格，目前功能正常，但首行会在页面加载时自动展开，需要让首行在页面加载时保持收起状态。相关JavaScript代码如下：

$(document).ready(function () {
  const expchartcontents = $('.expchart');

  expchartcontents.each((index, expchartcontents) => {
  let selecteditem = 0;

  let expchartItemIndex = -1;
  const changeTab = (index, item) => {
      var delay = 300;
      if (window.innerWidth < 980) {
        delay = 800;
      }
      if (expchartItemIndex !== index) {
            $(expchartcontents).find(".expchart-row")
                .eq(expchartItemIndex)
                .children(".expchartpane-subitem")
                .slideUp(delay);
            $(expchartcontents).find(".expchart-row")
                .eq(expchartItemIndex)
                .removeClass("clicked");
          
            $(expchartcontents).find(item)
                .children(".expchartpane-subitem")
                .slideDown(delay);
            $(expchartcontents).find(item)
                .addClass("clicked");
            expchartItemIndex = index;

      } else {
          $(expchartcontents).find(".expchart-row")
            .eq(expchartItemIndex)
            .children(".expchartpane-subitem")
            .slideUp(delay);
          $(expchartcontents).find(".expchart-row")
            .eq(expchartItemIndex)
            .removeClass("clicked");
          expchartItemIndex = -1;
      }
};
/* Click closes others */
$(expchartcontents).find(".expchart-row").each((index, item) => {
      $(expchartcontents).find(item).click(() => {
            changeTab(index, item);
            selecteditem = index;
      });
});
changeTab(0, $(expchartcontents).find(".expchart-row").eq(0)); 
  });
});

我对JavaScript不太熟悉，尝试修改了最后一行的changeTab调用参数：

changeTab(-1, $(expchartcontents).find(".expchart-row").eq(-1)); 
/* 无效果，首行仍展开 */
changeTab(0, $(expchartcontents).find(".expchart-row").eq(0)); 
/* 无效果，首行仍展开 */
changeTab(1, $(expchartcontents).find(".expchart-row").eq(1));
/* 第二行展开，首行仍展开 */ 
changeTab(2, $(expchartcontents).find(".expchart-row").eq(2)); 
/* 第三行展开，首行仍展开 */ 

还尝试修改了初始变量的值：

let selecteditem = 0; /* 尝试过-1、1、2、3...无变化 */
let expchartItemIndex = -1; /* 尝试过0、1、2、3...无变化 */

解决方法 #

问题核心在于代码最后一行主动调用了changeTab(0, ...)，强制展开了首行，同时需要确保子项初始状态为收起。

1. 移除自动展开的调用：删除代码末尾的changeTab(0, $(expchartcontents).find(".expchart-row").eq(0));，这是页面加载时自动展开首行的直接原因。

2. 确保初始样式隐藏子项：如果CSS中没有默认隐藏.expchartpane-subitem，添加以下样式：

.expchartpane-subitem {
  display: none;
}

3. 优化初始变量与逻辑：将初始selecteditem设为-1，与expchartItemIndex保持一致，同时在changeTab函数中增加判断，避免初始状态下执行无效的收起操作。

修改后的完整JavaScript代码：

$(document).ready(function () {
  const expchartcontents = $('.expchart');

  expchartcontents.each((index, expchartcontents) => {
  let selecteditem = -1;
  let expchartItemIndex = -1;
  
  const changeTab = (index, item) => {
      var delay = 300;
      if (window.innerWidth < 980) {
        delay = 800;
      }
      if (expchartItemIndex !== index) {
            // 仅当有已展开项时，才执行收起操作
            if (expchartItemIndex !== -1) {
              $(expchartcontents).find(".expchart-row")
                  .eq(expchartItemIndex)
                  .children(".expchartpane-subitem")
                  .slideUp(delay);
              $(expchartcontents).find(".expchart-row")
                  .eq(expchartItemIndex)
                  .removeClass("clicked");
            }
          
            $(expchartcontents).find(item)
                .children(".expchartpane-subitem")
                .slideDown(delay);
            $(expchartcontents).find(item)
                .addClass("clicked");
            expchartItemIndex = index;

      } else {
          $(expchartcontents).find(".expchart-row")
            .eq(expchartItemIndex)
            .children(".expchartpane-subitem")
            .slideUp(delay);
          $(expchartcontents).find(".expchart-row")
            .eq(expchartItemIndex)
            .removeClass("clicked");
          expchartItemIndex = -1;
      }
};
/* Click closes others */
$(expchartcontents).find(".expchart-row").each((index, item) => {
      $(expchartcontents).find(item).click(() => {
            changeTab(index, item);
            selecteditem = index;
      });
});
  });
});

说明：修改后页面加载时所有行的子项都会保持收起状态，点击任意行才会展开对应内容，同时保留“点击已展开行则收起”的原有功能。

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