包含plotly.js图表的div显隐切换时innerText空值报错问题

报错核心原因非常明确：你在折叠/展开的回调中调用$header.text()重写头部内容时，直接把头部div内的<span id="header symbol">节点删除了。
原本头部DOM结构是div包裹span，执行$header.text(新文本)后，div内部会被直接替换为纯文本，span节点彻底从DOM树移除，后续所有document.getElementById("header symbol")调用都会返回null，读取innerText自然抛出空引用错误。
另外还有三个隐藏问题：

• 元素ID包含空格，jQuery选择器中空格代表后代选择器，不做转义根本无法正确匹配对应元素
• plotFlow触发时没有判断容器折叠状态，无法实现折叠时自动展开的预期效果
• 你贴的index.html末尾多了一个多余的</div>闭合标签，会导致DOM结构解析异常

1. 修正折叠交互逻辑 #

不要直接替换整个header的文本内容，只更新span内部的文字，保留span节点不被删除：

$(".header").click(function () {
  const $header = $(this);
  const $content = $header.next();
  // 转义ID中的空格，正确选中span元素
  const $symbolSpan = $header.find("#header\\ symbol");
  $content.slideToggle(200, function () {
    const arrowSymbol = $content.is(":visible") ? "▼" : "▲";
    $symbolSpan.text(`${arrowSymbol} ${clickedBranchName} -- ${clickedBranchFromBus} ⟶ ${clickedBranchToBus}`);
  });
});

2. 修正plotFlow渲染逻辑 #

新增折叠状态判断，容器处于折叠状态时自动展开，再更新头部文本和图表：

function plotFlow(info) {
  console.log(info.object.properties.name);
  const dates = topoData.data.datetime;
  const flows = topoData.data.flow;
  var trace1 = { x: dates, y: flows, mode: "lines", type: "scatter" };
  var data = [trace1];
  var layout = {
    plot_bgcolor: "rgba(128,128,128,1)",
    paper_bgcolor: "rgba(128,128,128,1)",
    height: 350,
    xaxis: {
      tickmode: "auto",
      nticks: 36,
    },
  };
  var plot_div = document.getElementById("plot_data");
  const $content = $(plot_div);
  const symbolSpan = document.getElementById("header symbol");
  // 内容区隐藏时自动展开
  if (!$content.is(":visible")) {
    $content.slideDown(200);
  }
  // 更新头部展示文本
  symbolSpan.innerText = `▼ ${clickedBranchName} -- ${clickedBranchFromBus} ⟶ ${clickedBranchToBus}`;
  Plotly.newPlot(plot_div, data, layout);
}

3. 修复HTML结构问题 #

删除index.html中plot_div容器闭合后多余的</div>标签，同时建议把带空格的IDheader symbol改成header_symbol，避免后续选择器匹配出问题，修改后对应代码里的ID引用同步替换即可。

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