如何在HTML中实现盒子点击展开动画及内部image map跳转功能？

一、盒子展开动画实现（避开button的范围问题） #

不用把整个盒子设为button，用普通div做容器，搭配CSS过渡动画+JS切换类就能实现精准的展开效果，还能灵活控制样式。

1. HTML结构

<!-- 盒子容器 -->
<div class="expand-box" tabindex="0">
  <!-- 点击触发区（可替换为盒子封面/标题） -->
  <div class="box-trigger">点击展开</div>
  <!-- 展开后显示的内容区，初始隐藏 -->
  <div class="box-content">
    <!-- 嵌入带image map的图片 -->
    <img src="your-image.jpg" usemap="#content-map" alt="跳转区域图">
    <map name="content-map">
      <area shape="rect" coords="0,0,100,100" href="page1.html" alt="跳转至页面1">
      <area shape="circle" coords="150,150,50" href="page2.html" alt="跳转至页面2">
    </map>
  </div>
</div>

2. CSS样式（核心是过渡动画）

.expand-box {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden; /* 裁剪超出容器的内容，实现展开/收起的视觉效果 */
  cursor: pointer;
}

.box-trigger {
  padding: 16px;
  background: #f8f8f8;
}

/* 初始状态：内容区高度为0，完全隐藏 */
.box-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease; /* 0.3秒平滑过渡动画 */
}

/* 展开状态：通过active类触发内容区显示 */
.expand-box.active .box-content {
  height: 220px; /* 按实际内容高度调整 */
  padding: 16px;
}

3. JavaScript控制展开/收起

const expandBox = document.querySelector('.expand-box');

// 点击切换展开状态
expandBox.addEventListener('click', function() {
  this.classList.toggle('active');
});

// 支持键盘回车触发（加tabindex保证可访问性）
expandBox.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    this.classList.toggle('active');
  }
});

二、Image Map跳转注意事项 #

• 确保img的usemap属性和map的name属性完全一致（大小写敏感）
• coords坐标要和图片实际尺寸匹配，新手建议先固定图片尺寸，避免坐标混乱
• 直接点击图片对应区域即可触发跳转，无需额外JS处理

关键细节说明 #

• 不用button的原因：button自带浏览器默认样式，且语义上属于表单控件，用div+tabindex既能保证键盘可触发的可访问性，又能精准控制盒子范围
• 动画原理：通过切换active类改变内容区的height，配合CSStransition实现平滑过渡，比JS直接修改样式更简洁易维护
• 若内容高度不确定，可把height换成max-height（比如设为1000px），过渡效果依然生效

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