菜单文字含空格致子菜单失效，如何支持多词菜单项？

核心问题大概率是菜单的交互逻辑（JS/CSS）依赖了菜单项的文本内容作为标识，空格导致选择器解析错误或者关联匹配失败，以下是具体解决步骤：

1. 替换JS里的文本依赖，改用data属性关联 #

如果是JS控制子菜单显示，别用菜单项的文本（比如What We Do）去生成选择器或匹配标识，换成自定义的data-*属性：

• 修改HTML：

  <li>HOME</li>
  <li class='menu-item-has-children' data-menu-id="what-we-do">
      <a>What We Do</a>
      <ul class='sub-menu' data-parent-id="what-we-do">
          <!-- 子菜单项 -->
      </ul>
  </li>
  

• 调整JS逻辑，通过data-menu-id和data-parent-id关联：

  // 示例：点击父菜单切换子菜单显示
  document.querySelectorAll('.menu-item-has-children').forEach(item => {
      item.addEventListener('click', () => {
          const targetId = item.dataset.menuId;
          const subMenu = document.querySelector(`.sub-menu[data-parent-id="${targetId}"]`);
          subMenu.classList.toggle('show');
      });
  });
  

2. 用纯CSS实现子菜单显示，完全脱离文本限制 #

如果不需要JS交互，直接用CSS的hover/focus状态控制，完全和菜单项文本无关：

• 保留正确的HTML嵌套结构：

  <li>HOME</li>
  <li class='menu-item-has-children'>
      <a>What We Do</a>
      <ul class='sub-menu'>
          <!-- 子菜单项 -->
      </ul>
  </li>
  

• 添加CSS样式：

  /* 默认隐藏子菜单 */
  .menu-item-has-children .sub-menu {
      display: none;
      position: absolute;
      background: #fff;
      padding: 0;
      list-style: none;
  }
  /* hover或聚焦时显示子菜单 */
  .menu-item-has-children:hover .sub-menu,
  .menu-item-has-children:focus-within .sub-menu {
      display: block;
  }
  

3. 检查现有JS/CSS中的文本选择器 #

如果之前的代码是用文本内容写的选择器（比如[text="WHATWEDO"]），把这类选择器改成基于类名或data属性的：

• 错误示例（会因为空格失效）：

  a:contains("WHATWEDO") + .sub-menu {
      display: block;
  }
  

• 修正后（用类名或结构关系）：

  .menu-item-has-children:hover .sub-menu {
      display: block;
  }
  

4. 排查后端生成逻辑（如果是动态菜单） #

如果菜单是后端渲染的，检查代码是否把空格当成了分隔符，导致菜单项文本被截断或子菜单关联标识错误：

• 确保后端输出的<a>标签内正确保留空格文本，比如<a>What We Do</a>而不是被拆成多个标签；
• 确保父菜单项和子菜单的关联标识（比如ID、data属性）是独立于文本的固定值，不会因为文本空格而改变。

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