移动端点击图标实现Navbar滑入功能故障排查求助

云原生阿岚

2026-7-25

核心问题分析

CSS选择器错误：原代码中.header .navbar .active是子元素选择器，只会匹配.navbar内部带.active类的元素，而我们需要的是.navbar自身添加.active类时的样式，正确写法是去掉选择器之间的空格：.header .navbar.active。
HTML属性语法错误：菜单按钮的id属性用了反引号包裹，属于语法错误，应改为双引号。
缺少过渡动画：原代码没有设置过渡效果，即使修复后也会瞬间显示，建议添加transition属性实现平滑滑入。

修正后的完整代码

JavaScript

let navbar = document.querySelector(".navbar");
document.querySelector("#menu-btn").onclick = () => {
  navbar.classList.toggle("active");
}

CSS

.header .navbar {
  position: absolute;
  top: 100%;
  left: -100%;
  background: #13131a;
  width: 30rem;
  height: calc(100vh - 9.5rem);
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  /* 添加过渡动画，实现平滑滑入 */
  transition: left 0.3s ease;
}

/* 修正选择器：去掉.navbar和.active之间的空格 */
.header .navbar.active {
  left: 0;
}

HTML

<!-- 确保navbar被.header包裹，否则CSS选择器需要对应调整 -->
<div class="header">
  <div class="navbar mx-auto ">
    <a asp-action="Index">صفحه اصلی</a>
    <a href="#products">محصولات</a>
    <a href="#about">درباره ما</a>
    <a href="#contact">ارتباط با ما</a>
  </div>
  <div class="icons">
    <i class="fa-solid fa-cart-shopping "></i>
    <i class="fa-solid fa-magnifying-glass "></i>
    <i class="fa-solid fa-right-to-bracket "></i>
    <!-- 修正id属性的引号为双引号 -->
    <i class="fa-solid fa-bars" id="menu-btn"></i>
  </div>
</div>