提问人：Jj17 提问时间：10/21/2023 最后编辑：Rory McCrossanJj17 更新时间：11/2/2023 访问量：43
JQuery 拆分 div 问题
JQuery Split div issue
问：
我正在尝试使用 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" />答：
0赞
SioGabx
10/21/2023
#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" />
0赞
Twisty
11/2/2023
#2
该问题与 E 与 W 大小调整的方式有关。在 E 手柄上执行“调整大小”时，元素“宽度”将更改。当您在 W 上调整大小时，左侧位置和宽度都会更改。
例：
$("#resizable").resizable({
maxWidth: 500,
minWidth: 100,
handles: "w",
resize: function(e, ui) {
console.log(ui.element.css("left"), ui.size.width);
}
});#resizable {
width: 100px;
height: 100px;
background: #ccc;
right: 0;
position: absolute;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="resizable"></div>要正确地使右侧边栏以与左侧边栏相同的方式运行，我们只需要执行两个操作：
- 根据需要增大或缩小主要内容宽度
- 增长和缩小右侧边栏的相反数量
考虑使主要内容可调整大小，并在某个时候以相反的方式更改右侧边栏的宽度。
$(function() {
$(".left-sidebar").resizable({
handles: "e",
minWidth: 100,
maxWidth: 500,
});
$(".main-content").resizable({
handles: "e",
resize: function(e, ui) {
var t = $(".container").width();
var l = $(".left-sidebar").width() + ui.size.width;
$(".right-sidebar").css({
maxWidth: "500px",
minWidth: "100px"
}).width(t - l);
}
});
});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" />
评论