HTML按钮制作及CSS Grid/Flexbox布局与菜单交互问题求助

一、修复头部高度与精灵球图片等高 #

头部高度异常通常是Grid容器行配置或元素默认样式导致的，按以下步骤调整：

• 清除全局默认边距：避免页面整体偏移影响布局

html, body {
  margin: 0;
  padding: 0;
}

• 设置Grid容器行自适应：把Header对应的网格行设为auto，让它自动适配内容高度

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行适配Header，第二行占剩余空间 */
}

• 让Header贴合内容：设置height: fit-content确保头部高度完全匹配内部图片和文字，同时用Flex实现垂直居中

.Header.flex-container {
  background-color: red;
  height: fit-content;
  display: flex;
  align-items: center;
  padding: 0 1rem; /* 可选，避免内容贴边 */
}

• 控制图片尺寸：给精灵球图片设置合适高度，避免过大撑高头部

.Header img {
  height: 40px; /* 按需调整 */
  vertical-align: middle; /* 消除图片与文字间的基线间隙 */
}

二、实现菜单展开/收起交互 #

通过HTML结构调整+CSS+JavaScript实现点击按钮切换菜单状态：

1. 修改HTML，添加切换按钮 #

<div class="Menu">
  <div class="menu-title">
    My Favorite Pokemon
    <button class="toggle-btn">click here</button>
  </div>
  <article class="menu-content">
    <div class="point" onclick="location.href='#Pikachu'"><span class="bc"><u>Pikachu</u></span></div>
    <div class="point" onclick="location.href='#Giratina'"><span class="bc"><u>Giratina</u></span></div> <!-- 修正原代码拼写错误：Giretina → Giratina -->
    <div class="point" onclick="location.href='#Arceus'"><span class="bc"><u>Arceus</u></span></div>
    <div class="point" onclick="location.href='#Snorlax'"><span class="bc"><u>Snorlax</u></span></div>
    <div class="point" onclick="location.href='#Lucario'"><span class="bc"><u>Lucario</u></span></div>
  </article>
</div>

2. CSS设置默认隐藏与切换样式 #

/* 默认隐藏菜单内容 */
.menu-content {
  display: none;
}

/* 添加active类时显示内容 */
.menu-content.active {
  display: block;
}

/* 可选：添加平滑展开动画 */
/* .menu-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.menu-content.active {
  max-height: 300px;
} */

3. JavaScript绑定点击事件 #

const toggleBtn = document.querySelector('.toggle-btn');
const menuContent = document.querySelector('.menu-content');

toggleBtn.addEventListener('click', () => {
  menuContent.classList.toggle('active');
});

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