要实现当侧边栏打开时将侧边栏旁边的 div 推向左侧，可以使用 CSS 的 transform 属性。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="sidebar">侧边栏</div>
<div id="content">主要内容</div>
<style>
#sidebar {
width: 200px;
background-color: #f1f1f1;
position: fixed;
top: 0;
bottom: 0;
left: -200px;
transition: all 0.3s ease;
}
#sidebar.open {
left: 0;
}
#content {
margin-left: 200px;
padding: 20px;
}
</style>
<script>
// 获取侧边栏元素
var sidebar = document.getElementById("sidebar");
// 添加点击事件监听器
sidebar.addEventListener("click", function () {
if (sidebar.classList.contains("open")) {
// 关闭侧边栏时，将 div 推向右侧
sidebar.classList.remove("open");
document.getElementById("content").classList.remove("push");
} else {
// 打开侧边栏时，将 div 推向左侧
sidebar.classList.add("open");
document.getElementById("content").classList.add("push");
}
});
</script>
</body>
</html>在上述代码中，我们使用 position:fixed 将侧边栏固定在左侧，并使用 transition 属性添加平滑过渡效果。当点击侧边栏时，我们切换 open 类名，以控制侧边栏的显示和隐藏。当侧边栏打开时，我们添加 push 类名到 #content 元素，以使其在侧边栏打开时向左移动。
你可以根据实际需求调整侧边栏的宽度、过渡时间和其他样式属性。此外，确保在实际应用中正确引入和使用上述代码，并根据你的 HTML 结构进行适当的调整。
