移动端切换菜单下为SERVICES项添加点击触发子菜单求助

没问题，我来帮你搞定这个子菜单需求！下面是完整的实现步骤，结合你现有的代码做修改就行：

1. 修改HTML结构 #

首先给SERVICES项添加子菜单的层级结构，把原来的SERVICES列表项改成带子菜单的形式：

<nav id="navigation">
  <a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">&#9776; MENU</a>
  <ul id="navigation_list" role="navigation">
    <!-- 保留你原来的其他菜单项 -->
    <li class="has-submenu">
      <a href="#" onclick="toggleSubmenu(this); return false;">SERVICES</a>
      <ul class="submenu">
        <li><a href="#">New</a></li>
        <li><a href="#">Used</a></li>
      </ul>
    </li>
    <!-- 保留你原来的其他菜单项 -->
  </ul>
</nav>

这里给父项加了has-submenu类用来标识带子菜单的项，子菜单用submenu类区分，同时给SERVICES的链接绑定了新的点击事件。

2. 添加CSS样式 #

默认隐藏子菜单，同时定义激活状态的显示样式，还可以加个小箭头提示用户有子菜单：

/* 默认隐藏子菜单 */
.submenu {
  display: none;
  list-style: none;
  padding-left: 1.2rem; /* 缩进区分层级，更直观 */
  background-color: #f5f5f5; /* 可选：和主菜单区分背景色 */
  margin-top: 0.5rem;
}

/* 激活时显示子菜单 */
.has-submenu.active .submenu {
  display: block;
}

/* 给带子菜单的项加下拉箭头提示 */
.has-submenu > a::after {
  content: " ▼";
  font-size: 0.8rem;
  margin-left: 0.3rem;
}

/* 可选：激活时箭头朝上，更符合交互逻辑 */
.has-submenu.active > a::after {
  content: " ▲";
}

3. 补充JavaScript逻辑 #

在你现有的toggleNav函数基础上，新增切换子菜单的函数，同时处理菜单收起时自动关闭所有子菜单的逻辑，避免状态混乱：

// 原来的切换主菜单函数，新增关闭子菜单的逻辑
function toggleNav() {
  const navList = document.getElementById('navigation_list');
  navList.classList.toggle('active');
  
  // 主菜单收起时，自动关闭所有展开的子菜单
  if (!navList.classList.contains('active')) {
    const activeSubmenus = document.querySelectorAll('.has-submenu.active');
    activeSubmenus.forEach(item => item.classList.remove('active'));
  }
}

// 切换子菜单的函数
function toggleSubmenu(link) {
  // 找到当前点击项的父级li元素
  const parentLi = link.closest('.has-submenu');
  // 切换active类来控制子菜单显示/隐藏
  parentLi.classList.toggle('active');
  
  // 可选：如果需要点击其他子菜单时自动关闭当前的，取消下面注释
  // document.querySelectorAll('.has-submenu.active').forEach(item => {
  //   if (item !== parentLi) item.classList.remove('active');
  // });
}

4. 额外优化建议 #

• 确保你原来的主菜单样式中，#navigation_list.active已经正确设置为显示状态（比如display: block）。
• 可以给子菜单的链接单独加padding、字体大小等样式，和主菜单区分开，提升用户体验。
• 这个逻辑已经适配移动端触摸点击，不需要额外处理触摸事件。

这样修改后，用户点击SERVICES时就会展开子菜单，再次点击会收起；主菜单收起时所有子菜单也会自动关闭，完美适配移动端交互！

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