JQuery Split div 问题

Question

我正在尝试使用 jQuery 和 jQueryUI 创建一对可调整大小的侧边栏（但并非完全必要）。

我遇到的问题是它无法正确调整大小。右侧边栏给我带来了问题，因为它调整了左侧边栏的大小，工作完全正常。我想知道如何模仿左侧栏的行为以及它如何在右侧栏上很好地工作

我不知道如何修复它，建议使用 split.js，但我无法让它工作。我的项目是一个简单的项目，不需要复杂的设置，任何帮助都可以。

$(function() {
  $(".left-sidebar").resizable({
    handles: "e",
    minWidth: 100,
    maxWidth: 500,
  });

  $(".right-sidebar").resizable({
    handles: "w",
    minWidth: 100,
    maxWidth: 500,
  });
});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left-sidebar,
.right-sidebar {
  background: #f0f0f0;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.main-content {
  flex: 1;
  background: #e0e0e0;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar Content
  </div>
  <div class="main-content">
    Main Content
  </div>
  <div class="right-sidebar">
    Right Sidebar Content
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />

Answer 1

这是你想要的吗？

您可以通过添加以下内容在调整大小期间将 left 设置为 0：

 resize: function(event, ui) {
      ui.position.left = 0;
 }

$(function() {
  $(".left-sidebar").resizable({
    handles: "e",
    minWidth: 100,
    maxWidth: 500,
  });

  $(".right-sidebar").resizable({
    handles: "w", 
    resize: function(event, ui) {
      ui.position.left = 0;
    },
    minWidth: 100,
    maxWidth: 500,
  });
});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100%;
}

.left-sidebar,
.right-sidebar {
  background: #f0f0f0;
  width: 300px;
  overflow: hidden;
  position: relative;
}

.main-content {
  flex: 1;
  background: #e0e0e0;
}

<div class="container">
  <div class="left-sidebar">
    Left Sidebar Content
  </div>
  <div class="main-content">
    Main Content
  </div>
  <div class="right-sidebar">
    Right Sidebar Content
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />