使用FlexBox双面板示例时遇jQuery报错：$(...).resizable is not a function

这个错误的核心原因是你调用的resizable方法并没有被挂载到jQuery对象上，通常是缺少必要依赖或引入顺序错误导致的，下面是一步步的解决思路：

1. 确认你引入了正确的依赖 #

resizable不是jQuery的原生方法，它要么是jQuery UI组件库的一部分，要么是你参考示例中使用的第三方自定义插件。你需要确保已引入对应的资源：

情况一：使用jQuery UI的Resizable组件 #

如果是这种情况，你需要按顺序引入以下资源：

<!-- 1. 先引入jQuery核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 2. 再引入jQuery UI库 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<!-- 可选：引入jQuery UI基础样式，确保拖动手柄显示正常 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

情况二：使用第三方自定义resizable插件（比如你参考的Codepen示例） #

你参考的示例大概率用了一个自定义的resizable插件，但你只复制了调用代码，没有把插件的核心实现加进来。这种情况下，你需要把插件的代码也添加到项目中，比如类似这样的基础实现逻辑：

// 自定义resizable插件核心逻辑（参考示例的实现思路）
$.fn.resizable = function(options) {
  const settings = $.extend({
    handleSelector: '.splitter',
    resizeHeight: true,
    resizeWidth: true
  }, options);

  // 这里省略具体的鼠标事件监听、尺寸计算等拖动逻辑
  // 你需要从参考示例中完整复制这部分核心代码
};

2. 检查资源引入顺序 #

一定要确保先引入jQuery，再引入resizable相关的插件JS。如果插件JS在jQuery之前加载，插件无法找到jQuery对象进行方法挂载，就会触发这个报错。

3. 验证插件是否正确挂载 #

打开浏览器开发者工具（F12），在控制台输入以下代码：

console.log($.fn.resizable);

如果输出undefined，说明插件没有被正确挂载，回到前两步检查资源引入；如果输出一个函数，说明插件已经挂载，再检查你的调用代码是否有语法问题。

4. 确保DOM加载完成后再调用方法 #

把你的调用代码放在$(document).ready()中，避免因为DOM还没渲染完成就执行方法导致的问题：

$(document).ready(function() {
  $(".panel-left").resizable({ handleSelector: ".splitter", resizeHeight: false });
  $(".panel-top").resizable({ handleSelector: ".splitter-horizontal", resizeWidth: false });
});

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