HTML 可伸缩右侧栏布局代码示例

以下是一个简单的 HTML 代码段，用于创建一个具有可伸缩右侧栏的布局。

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
}

#sidebar {
  flex: 0 0 200px;
  background-color: #f1f1f1;
  transition: width 0.3s;
}

#content {
  flex: 1;
  background-color: #ffffff;
  transition: margin-left 0.3s;
}

.collapsed #sidebar {
  width: 0;
}

.collapsed #content {
  margin-left: 0;
}
</style>
</head>
<body>
<div id="container">
  <div id="sidebar">
    <!-- 右边栏内容 -->
  </div>
  <div id="content">
    <!-- 主内容区域 -->
  </div>
</div>

<button onclick="toggleSidebar()">切换</button>

<script>
function toggleSidebar() {
  var container = document.getElementById("container");
  container.classList.toggle("collapsed");
}
</script>
</body>
</html>

这段代码创建了一个具有可伸缩右侧栏的布局。右侧栏的宽度可以通过调整#sidebar的flex属性来控制。点击'切换'按钮会通过添加或删除collapsed类来切换右侧栏的可见性。