Angular适配小屏幕导航栏：点击图标展开菜单问题求助

直接给出可运行的修正代码及问题排查说明：

1. 保持结构一致的HTML #

<nav class="navbar">
  <div class="navbar-toggle" id="mobile-menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
  <ul class="navbar-nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

2. 确保逻辑正确的CSS #

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f8f9fa;
}

.navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-nav li {
  margin: 0 1rem;
}

.navbar-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 3px 0;
}

@media (max-width: 768px) {
  .navbar-nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    padding: 1rem;
  }

  .navbar-nav.active {
    display: flex;
  }

  .navbar-toggle {
    display: flex;
  }
}

3. 修复后的TypeScript代码 #

// 等待DOM完全加载后执行，避免元素未渲染导致的null错误
document.addEventListener('DOMContentLoaded', () => {
  // 获取元素并添加类型断言，同时做存在性检查
  const mobileMenu = document.getElementById('mobile-menu') as HTMLElement;
  const navLinks = document.querySelector('.navbar-nav') as HTMLElement;

  if (mobileMenu && navLinks) {
    // 绑定点击事件，切换菜单显示状态
    mobileMenu.addEventListener('click', () => {
      navLinks.classList.toggle('active');
    });
  }
});

原代码常见问题排查 #

• DOM加载时机错误：如果代码没有等待DOM加载完成就执行，getElementById/querySelector会返回null，无法绑定事件。
• TypeScript类型问题：原生DOM API返回HTMLElement | null，直接调用方法会触发类型错误，必须加类型断言和存在性检查。
• 类名不匹配：确保CSS中控制菜单显示的类名（如active）和TS中切换的类名完全一致。

对应参考jQuery代码的原生TS等价逻辑 #

你的参考jQuery代码应该类似：

$(document).ready(function() {
  $('#mobile-menu').click(function() {
    $('.navbar-nav').toggleClass('active');
  });
});

上面的TS代码完全模拟该逻辑：用DOMContentLoaded替代$(document).ready，用classList.toggle替代toggleClass，用原生事件绑定替代jQuery事件绑定。

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