复刻苹果官网：菜单按钮点击无响应、始终展开问题求助

问题描述 #

复刻苹果官网时，点击左侧菜单按钮无法触发菜单展开/收起，菜单始终处于展开状态，浏览器控制台未检测到JavaScript报错。

问题分析 #

排查代码后发现几个核心问题：

1. JavaScript代码未引入页面：当前HTML中没有引入编写的JS文件，导致菜单按钮的点击事件完全没有绑定，自然无响应。
2. DOM样式赋值错误：修改header背景色时使用了header.backgroundColor，这不是正确的DOM样式操作方式，应该用header.style.backgroundColor。
3. 菜单初始状态冲突：CSS中.menu默认设置height:100%，虽然调用了slideUp()设置height为0，但初始渲染时CSS优先级可能覆盖，动画未正确触发。
4. 动画实现不够健壮：直接修改height为100%在内容高度不确定时容易出问题，建议用max-height配合过渡动画。

修复步骤 #

1. 引入JavaScript文件 #

在HTML的</body>标签前添加JS文件引入（假设JS文件名为script.js）：

<script src="script.js"></script>

2. 修正背景色赋值代码 #

将JS中修改header背景色的代码替换为正确的样式操作：

// 原错误代码
header.backgroundColor = "black";
// 修正后
header.style.backgroundColor = "black";

// 原错误代码
header.backgroundColor = "#333333";
// 修正后
header.style.backgroundColor = "#333333";

3. 调整菜单初始CSS状态 #

修改.menu的初始CSS，默认设置收起状态，确保页面加载时菜单隐藏：

.menu {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  max-height: 0; /* 默认收起 */
  background-color: black;
  overflow: hidden;
  margin-top: -5px;
  transition: max-height 0.5s ease-in-out; /* 过渡动画统一放在CSS中 */
}

4. 优化动画逻辑 #

用max-height代替height实现更稳定的展开/收起，适配内容高度变化：

function slideUp() {
  menu.style.maxHeight = "0";
}

function slideDown() {
  menu.style.maxHeight = "100vh"; /* 用视口高度确保覆盖页面 */
}

完整修复代码 #

修改后的HTML（关键部分） #

<!-- 在body末尾添加JS引入 -->
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="script.js"></script> <!-- 新增JS引入 -->
</body>

修改后的JavaScript #

const menuBtn = document.querySelector('.menuBtn');
const menu = document.querySelector('.menu');
const header = document.querySelector('#header');

let IsMenuOpen = false;

menuBtn.addEventListener('click', () => {
    if(IsMenuOpen === false) {
        slideDown();
        header.style.backgroundColor = "black";
        IsMenuOpen = true;
    }else {
        slideUp();
        header.style.backgroundColor = "#333333";
        IsMenuOpen = false;
    }
})

function slideUp() {
    menu.style.maxHeight = "0";
}
slideUp();

function slideDown() {
    menu.style.maxHeight = "100vh";
}

修改后的菜单CSS #

.menu {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  max-height: 0;
  background-color: black;
  overflow: hidden;
  margin-top: -5px;
  transition: max-height 0.5s ease-in-out;
}

.menuContent {
  margin-top: 55px;
  width: 80%;
}

.menuInput {
  width: 100%;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #424245;
  padding-top: 7px;
  padding-bottom: 10px;
}

.menuInput input{
  width: 95%;
  height: 30px;
  font-size: 18px;
  padding: 5px;
  background-color: #1d1d1f;
  outline: none;
  border: none;
  border-radius: 10px;
  color: white;
}

.menuItem {
  display:flex ;
  align-items: center;
  height: 7%;
  font-size: 18px;
  border-bottom: 1px solid #424245;
}

.menuItem a {
  text-decoration: none;
  color: #9f9f9f;
  transition: all ease 0.3s;
}

.menuItem a:hover {
  color: white;
}

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