如何在父菜单包含子菜单时移除其锚点链接？

嘿，我来帮你搞定这个问题！要移除那些标注了“Remove link”的父菜单锚点链接，根据你的使用场景，这里有几种实用的方案：

方法1：直接修改HTML（静态场景首选） #

如果你能直接编辑菜单的HTML代码，这是最直接靠谱的方式。我们可以把需要去掉链接的<a>标签换成普通文本容器，或者保留<a>但移除跳转功能：

替换为Span标签（推荐） #

把原来的锚点标签换成<span>，既能保留菜单的视觉一致性，又完全去掉了链接功能：

<span class="menu-parent">about Us</span>

保留A标签但禁用跳转 #

要是你想保留<a>标签（比如为了复用现有样式），可以去掉href属性，或者设置成javascript:void(0)来阻止跳转：

<a href="javascript:void(0)" class="menu-parent">about Us</a>

修改后的完整菜单代码如下：

<ul class="sitemap-ul">
  <li>
    <a href="/">Home</a>
  </li>
  <li>
    <span class="menu-parent">about Us</span> <!-- 已移除链接 -->
    <ul>
      <li><a href="/mission">mission</a></li>
      <li><a href="/vision">vission</a></li>
    </ul>
  </li>
  <li>
    <span class="menu-parent">Media</span> <!-- 已移除链接 -->
    <ul>
      <li><a href="/media/news">news</a></li>
    </ul>
  </li>
  <li>
    <a href="/contact/">Contact</a>
  </li>
</ul>

方法2：JavaScript动态处理（动态生成菜单适用） #

如果菜单是CMS、框架或者后端动态生成的，没法直接改HTML，用JS就能自动找到带子菜单的父项并移除链接：

原生JavaScript实现（兼容现代浏览器） #

// 找到所有包含子菜单的父li元素
const parentMenuItems = document.querySelectorAll('.sitemap-ul li:has(ul)');

parentMenuItems.forEach(item => {
  const link = item.querySelector('a');
  if (link) {
    // 移除href属性，彻底去掉链接
    link.removeAttribute('href');
    // 阻止点击事件（防止残留的跳转行为）
    link.addEventListener('click', (e) => e.preventDefault());
    // 可选：调整样式，让它看起来像普通文本
    link.style.pointerEvents = 'none';
    link.style.textDecoration = 'none';
  }
});

兼容旧浏览器版本 #

如果需要支持不兼容:has选择器的旧浏览器，可以换一种判断方式：

const parentMenuItems = document.querySelectorAll('.sitemap-ul li');

parentMenuItems.forEach(item => {
  // 判断当前li是否包含子菜单ul
  if (item.querySelector('ul')) {
    const link = item.querySelector('a');
    if (link) {
      link.href = 'javascript:void(0)';
      link.addEventListener('click', e => e.preventDefault());
    }
  }
});

方法3：CSS临时阻止点击（快速应急方案） #

要是你只是想快速让链接不能点击，暂时不想改HTML或JS，可以用CSS禁用点击事件：

/* 给所有带子菜单的父项a标签禁用点击 */
.sitemap-ul li:has(ul) a {
  pointer-events: none;
  cursor: default; /* 鼠标从手型改成默认箭头 */
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 颜色和普通文本一致 */
}

⚠️ 注意：这种方法只是让链接不能点击，HTML里的href还是存在的，用户右键依然能看到链接地址，适合临时应急用。

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