当前位置：首页 > JavaScript

js 实现菜单切换

2026-03-16 04:54:32JavaScript

实现菜单切换的 JavaScript 方法

使用 classList 切换类名

通过 classList.toggle() 方法动态添加或移除 CSS 类，控制菜单显示/隐藏状态：

const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');

menuBtn.addEventListener('click', () => {
  menu.classList.toggle('active');
});

对应 CSS 示例：

.menu {
  display: none;
}
.menu.active {
  display: block;
}

直接修改 style 属性

通过 JavaScript 直接操作元素的 style 属性：

js 实现菜单切换

const toggleMenu = () => {
  const menu = document.getElementById('dropdown');
  menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
};

使用数据属性控制状态

通过自定义 data-* 属性存储菜单状态：

document.addEventListener('click', (e) => {
  if (!e.target.matches('[data-toggle="menu"]')) return;

  const targetId = e.target.dataset.target;
  const menu = document.getElementById(targetId);
  const isHidden = menu.dataset.visible === 'false';

  menu.dataset.visible = isHidden;
  menu.style.transform = isHidden ? 'translateX(0)' : 'translateX(-100%)';
});

动画效果实现

结合 CSS transition 实现平滑动画：

js 实现菜单切换

function toggleMenu() {
  const nav = document.querySelector('nav');
  nav.style.transform = nav.style.transform.includes('translateX(0)') 
    ? 'translateX(-100%)' 
    : 'translateX(0)';
}

对应 CSS：

nav {
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
}

多级菜单处理

递归处理嵌套菜单结构：

document.querySelectorAll('.menu-item').forEach(item => {
  item.addEventListener('click', function() {
    const submenu = this.querySelector('.submenu');
    if (submenu) {
      submenu.style.display = submenu.style.display === 'block' 
        ? 'none' 
        : 'block';
    }
  });
});

注意事项

移动端需考虑触摸事件兼容性
菜单打开时应确保其他交互元素被禁用（如添加遮罩层）
对于复杂动画建议使用 CSS 而非 JavaScript 控制
可访问性需添加 aria-expanded 等 ARIA 属性

完整示例

<button class="menu-toggle">菜单</button>
<nav class="main-menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li class="has-submenu">
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品A</a></li>
        <li><a href="#">产品B</a></li>
      </ul>
    </li>
  </ul>
</nav>

<script>
document.querySelector('.menu-toggle').addEventListener('click', function() {
  document.querySelector('.main-menu').classList.toggle('open');
});

document.querySelectorAll('.has-submenu > a').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    this.nextElementSibling.classList.toggle('show');
  });
});
</script>

<style>
.main-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.main-menu.open {
  max-height: 500px;
}
.submenu {
  display: none;
}
.submenu.show {
  display: block;
}
</style>