使用HTML、CSS、JS实现侧边栏子菜单及响应式功能，修复Myntra移动端克隆代码问题

问题修复方案 #

核心问题点 #

现有代码中子菜单功能失效的原因如下：

• 原生DOM的children是属性而非方法，不能直接传入选择器筛选目标子元素
• 菜单内的<a>标签会触发默认跳转行为，直接中断JS交互逻辑
• 仅绑定了一级菜单的点击事件，二级子菜单未配置对应的交互逻辑
• 子菜单点击事件会冒泡触发父级菜单的点击事件，导致父级菜单意外收起
• 未配置汉堡菜单打开、点击侧边栏外区域关闭的交互逻辑

修复后完整JavaScript代码 #

// 阻止所有菜单链接的默认跳转行为
document.querySelectorAll('.item-link').forEach(link => {
  link.addEventListener('click', e => e.preventDefault());
});

// 一级菜单展开/收起逻辑
document.querySelectorAll('.menu-items').forEach(menuItem => {
  menuItem.addEventListener('click', e => {
    // 阻止事件冒泡，避免子元素点击触发父级逻辑
    e.stopPropagation();
    menuItem.classList.toggle('active');
    const dropList = menuItem.querySelector('.drop-list');
    if(dropList) {
      dropList.style.display = dropList.style.display === 'block' ? 'none' : 'block';
      // 箭头旋转效果，不需要可以删除
      const arrow = menuItem.querySelector('.fas.fa-chevron-right');
      if(arrow) arrow.style.transform = dropList.style.display === 'block' ? 'rotate(90deg)' : 'rotate(0)';
    }
  });
});

// 二级子菜单展开/收起逻辑
document.querySelectorAll('.drop-item').forEach(dropItem => {
  dropItem.addEventListener('click', e => {
    e.stopPropagation();
    const subDropList = dropItem.querySelector('.drop-menu-list');
    if(subDropList) {
      subDropList.style.display = subDropList.style.display === 'block' ? 'none' : 'block';
      const arrow = dropItem.querySelector('.fas.fa-chevron-right');
      if(arrow) arrow.style.transform = subDropList.style.display === 'block' ? 'rotate(90deg)' : 'rotate(0)';
    }
  });
});

// 汉堡菜单打开侧边栏逻辑（请将.hamburger替换为你实际的汉堡按钮类名）
const hamburgerBtn = document.querySelector('.hamburger');
const sidebar = document.querySelector('.sidebar');
if(hamburgerBtn && sidebar) {
  hamburgerBtn.addEventListener('click', e => {
    e.stopPropagation();
    // 如果用CSS类控制侧边栏滑入，替换为sidebar.classList.toggle('active')即可
    sidebar.style.display = 'block';
  });

  // 点击侧边栏外区域关闭侧边栏
  document.addEventListener('click', e => {
    if(sidebar.style.display === 'block' && !sidebar.contains(e.target) && e.target !== hamburgerBtn) {
      sidebar.style.display = 'none';
      // 如果用CSS类控制，替换为sidebar.classList.remove('active')
    }
  });
}

可选优化CSS（提升交互体验） #

/* 箭头旋转过渡动画 */
.fas.fa-chevron-right {
  transition: transform 0.2s ease;
}

/* 侧边栏滑入动画，配合类控制使用 */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 280px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 999;
}
.sidebar.active {
  transform: translateX(0);
}

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