如何实现点击导航栏汉堡菜单显示Home、About导航列表

核心问题定位 #

• 现有代码绑定了showText()点击事件，但未定义对应JS函数，是点击无响应的核心原因
• 小屏样式直接隐藏了所有导航链接，未定义展开状态的展示规则
• 导航栏默认flex横向布局，展开时未调整排列方向，无法实现纵向堆叠

代码实现 #

方案1：推荐（CSS控制样式+JS切换类名，可维护性更高） #

1. JS代码（写入./js/app.js文件）

// 获取DOM节点
const hamburgerBtn = document.getElementById('hamburger');
const navContainer = document.querySelector('.topNav ul');
const navLinks = document.querySelectorAll('.topNav li a');

// 点击汉堡按钮切换菜单状态
function showText() {
  navContainer.classList.toggle('nav-open');
  // 切换汉堡/关闭图标
  const isMenuOpen = navContainer.classList.contains('nav-open');
  hamburgerBtn.innerHTML = isMenuOpen ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
}

// 可选功能：点击导航链接后自动收起菜单
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    navContainer.classList.remove('nav-open');
    hamburgerBtn.innerHTML = '<i class="fas fa-bars"></i>';
  })
})

2. CSS代码（替换原有992px断点以下的媒体查询块，追加到样式文件末尾即可）

@media screen and (max-width: 992px) {
  nav ul {
    flex-wrap: wrap;
    align-items: center;
  }
  nav li {
    width: 100%;
    text-align: right;
  }
  nav li a {
    display: none;
    padding: 0.6rem 0;
  }
  .hamburger{
    visibility: visible;
  }
  /* 菜单展开状态样式 */
  nav ul.nav-open {
    flex-direction: column;
    align-items: flex-end;
  }
  nav ul.nav-open li a {
    display: block;
  }
}

/* 大屏样式兜底，避免窗口拉伸时样式错乱 */
@media screen and (min-width: 993px) {
  nav ul {
    flex-direction: row !important;
  }
  nav li {
    width: auto;
    text-align: left;
  }
  nav li a {
    display: inline-block !important;
  }
}

方案2：纯JS控制样式（不需要写额外CSS类，适合快速验证效果） #

如果不想修改现有CSS，直接在./js/app.js写入以下代码即可：

const hamburgerBtn = document.getElementById('hamburger');
const navContainer = document.querySelector('.topNav ul');
const navLinks = document.querySelectorAll('.topNav li a');
let isMenuOpen = false;

function showText() {
  isMenuOpen = !isMenuOpen;
  if (isMenuOpen) {
    navLinks.forEach(link => link.style.display = 'block');
    navContainer.style.flexDirection = 'column';
    navContainer.style.alignItems = 'flex-end';
    hamburgerBtn.innerHTML = '<i class="fas fa-times"></i>';
  } else {
    navLinks.forEach(link => link.style.display = 'none');
    navContainer.style.flexDirection = 'row';
    hamburgerBtn.innerHTML = '<i class="fas fa-bars"></i>';
  }
}

// 点击链接自动收起
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    if(isMenuOpen) showText();
  })
})

额外注意点 #

• 你现有HTML中引入font-awesome的链接使用了中文全角引号，会导致图标加载失败，替换为英文半角双引号即可
• 纵向堆叠的间距、颜色等样式可以直接修改媒体查询内的对应属性自行调整

如果需要加展开动画，只需要给nav li a和nav ul加transition属性，配合高度/透明度变化即可实现

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