如何实现点击空白区域反向还原内容视图展开动画

问题根源 #

1. .container未设置宽高，内部矩形为绝对定位，导致容器实际尺寸为0，点击空白区域无法触发容器的点击事件；
2. 仅依赖点击目标判断展开/收起，无法响应容器外的点击操作。

修改后的完整代码 #

HTML

<div class="container" id="rectContainer">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

CSS

/* CSS to style the rectangles */
body {
  margin: 0;
  min-height: 100vh;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置足够宽高覆盖展开后的区域 */
  width: 600px;
  height: 100px;
}

.rectangle {
  width: 100px;
  height: 50px;
  background-color: orange;
  position: absolute;
  border-radius: 10px;
  transform: rotate(90deg);
  transform-origin: center;
  transition: left 0.5s;
  cursor: pointer;
  /* 初始位置统一通过CSS设置，避免内联样式 */
  left: 0;
}

JavaScript

const container = document.getElementById('rectContainer');
const rectangles = document.querySelectorAll('.rectangle');
const gap = 5;
const distance = 100;
let isExpanded = false;

// 展开/收起矩形函数
function toggleRectangles() {
  if (isExpanded) {
    // 收起：重置位置
    rectangles.forEach((rect) => {
      rect.style.left = '0px';
    });
  } else {
    // 展开：向左移动
    rectangles.forEach((rect, index) => {
      rect.style.left = `${index * -(distance + gap)}px`;
    });
  }
  isExpanded = !isExpanded;
}

// 容器内点击事件
container.addEventListener('click', (event) => {
  // 点击矩形时触发切换
  if (event.target.classList.contains('rectangle')) {
    toggleRectangles();
    // 阻止冒泡，避免触发body的点击事件
    event.stopPropagation();
  }
});

// 点击容器外（body）时收起
document.body.addEventListener('click', () => {
  if (isExpanded) {
    toggleRectangles();
  }
});

修改说明 #

1. 给.container设置宽高，确保容器覆盖展开后的矩形区域，保证点击范围有效；
2. 新增isExpanded状态变量，明确控制展开/收起状态，避免重复触发无效操作；
3. 改用addEventListener绑定事件，替代内联onclick，符合现代JS规范；
4. 监听body点击事件，实现点击容器外区域自动收起矩形的需求；
5. 点击矩形时阻止事件冒泡，避免触发body的点击事件导致刚展开就收起。

内容的提问来源于stack exchange，提问作者Subhajit Roy