使用JQUERY进行后台页面布局控制DIV实现左右式

在JQuery中，实现后台页面的左右式布局通常涉及到HTML结构和CSS样式的结合。JQuery本身主要用于处理DOM元素的动态操作，如添加、删除、修改元素或触发事件等，而页面的布局则更多地依赖于CSS。不过，我们可以通过JQuery来动态地调整布局，比如响应某些事件时改变DIV的宽度等。

以下是一个简单的示例，展示如何使用HTML和CSS来实现左右式布局，并通过JQuery来动态调整左边栏的宽度：

### HTML结构


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>左右布局</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
    <div class="left-panel">左侧内容</div>
    <div class="right-panel">右侧内容</div>
</div>
<button id="toggleWidth">切换左侧宽度</button>
</body>
</html>

### CSS样式 (styles.css)


.container {
    display: flex;
}

.left-panel, .right-panel {
    padding: 20px;
    height: 100vh; /* 填满视窗高度 */
}

.left-panel {
    background-color: #f0f0f0;
    width: 20%; /* 初始宽度 */
    transition: width 0.3s ease; /* 平滑过渡效果 */
}

.right-panel {
    background-color: #ffffff;
    flex-grow: 1; /* 右侧占据剩余空间 */
}

### JQuery脚本 (script.js)


$(document).ready(function() {
    $('#toggleWidth').click(function() {
        var leftPanel = $('.left-panel');
        var newWidth = leftPanel.width() === '20%' ? '50%' : '20%';
        leftPanel.css('width', newWidth);
    });
});

在这个示例中，`.container` 使用Flexbox布局来组织 `.left-panel` 和 `.right-panel`。`.left-panel` 初始宽度设置为20%，`.right-panel` 使用 `flex-grow: 1;` 来占据剩余空间。通过JQuery，我们为页面上的一个按钮绑定了点击事件，当点击时，会切换 `.left-panel` 的宽度。

请注意，虽然这里使用了JQuery来动态改变宽度，但实际的布局结构是通过CSS来定义的。