Kendo UI Splitter报错：Cannot read properties of null (reading '0') 求助

问题场景 #

执行到代码default分支的splitter.expand("#bottom-pane");语句时，触发错误：Cannot read properties of null (reading '0')，相关代码片段如下：

switch (collapseType) {
    case "top": {
        splitter.expand("#bottom-pane");
        splitter.collapse("#top-pane");
        splitter.size("#top-pane", "0%");
        splitterPosition = "top";
    } break;

    case "bottom": {
        splitter.expand("#top-pane");
        splitter.collapse("#bottom-pane");
        splitter.size("#bottom-pane", "0");
        splitterPosition = "bottom";
    } break;

    default: {
        splitter.expand("#bottom-pane");
        splitter.expand("#top-pane");
        splitter.size("#bottom-pane", "50%");
        splitter.size("#top-pane", "48.25%");
        $('#right-pane').css('top', '0px');
        splitterPosition = "middle";
    } break;
}

可能的原因及解决方法 #

• 目标面板DOM状态异常
  检查#bottom-pane元素在执行expand操作时是否存在于DOM中：

  • 确认没有其他代码在执行该分支前移除或隐藏了这个面板（比如调用remove()或设置display: none）
  • 验证splitter实例是否有效，是否在执行前被调用过destroy()方法导致内部引用丢失

• 重复操作触发内部状态冲突
  Kendo UI Splitter在尝试展开一个已经处于展开状态的面板时，内部可能出现状态判断错误。建议先判断面板状态再执行操作：

  default: {
      // 先判断面板是否处于折叠状态再执行展开
      if (splitter.element.find("#bottom-pane").hasClass("k-state-collapsed")) {
          splitter.expand("#bottom-pane");
      }
      if (splitter.element.find("#top-pane").hasClass("k-state-collapsed")) {
          splitter.expand("#top-pane");
      }
      splitter.size("#bottom-pane", "50%");
      splitter.size("#top-pane", "48.25%");
      $('#right-pane').css('top', '0px');
      splitterPosition = "middle";
  } break;
  

• 尺寸单位不一致导致面板异常
  在bottom分支中设置splitter.size("#bottom-pane", "0");时使用了无单位数值，可能导致面板被设置为0像素后，Kendo无法正确恢复其尺寸。建议统一使用百分比或像素单位：

  case "bottom": {
      splitter.expand("#top-pane");
      splitter.collapse("#bottom-pane");
      splitter.size("#bottom-pane", "0%"); // 修改为带单位的数值
      splitterPosition = "bottom";
  } break;
  

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