单击时更改多个div的div高度

基础概念

在Web开发中，通过单击事件更改多个div的高度通常涉及到JavaScript的事件处理和DOM操作。当用户单击某个元素时，JavaScript代码会被触发，进而修改目标div的样式属性，如height。

类型

固定高度切换：将div的高度在两个或多个固定值之间切换。
百分比高度调整：根据父容器或其他参考元素的大小动态调整div的高度。
基于内容的自适应高度：根据div内部内容的多少自动调整高度。

应用场景

折叠面板：用户可以点击标题来展开或收起内容区域。
响应式布局：在不同屏幕尺寸下自动调整元素大小以适应视口。
交互式图表或地图：点击某个区域时放大或缩小显示内容。

示例代码

以下是一个简单的示例，展示了如何在单击时更改多个div的高度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Div Height on Click</title>
<style>
  .box {
    width: 100px;
    background-color: lightblue;
    margin-bottom: 10px;
    transition: height 0.3s ease;
  }
</style>
</head>
<body>

<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>

<button onclick="toggleHeights()">Toggle Heights</button>

<script>
function toggleHeights() {
  const boxes = document.querySelectorAll('.box');
  boxes.forEach(box => {
    if (box.style.height === '100px' || box.style.height === '') {
      box.style.height = '200px';
    } else {
      box.style.height = '100px';
    }
  });
}
</script>

</body>
</html>