如何在Thinkific用自定义JS将下拉菜单项Apoyo改为Soporte？

API 探路者

2026-8-13

解决Thinkific平台下拉菜单项文本替换问题

由于你无法直接编辑Thinkific原始代码，仅能通过「Site footer code」注入自定义JS，以下是将下拉菜单项文本从「Apoyo」替换为「Soporte」的可行方案：

核心代码（适配动态渲染场景）

将这段代码粘贴到你的「Site footer code」区域：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 定义文本替换逻辑
  function updateMenuItemText() {
    // 遍历所有下拉菜单项，匹配目标文本
    const dropdownItems = document.querySelectorAll('a.dropdown-item');
    dropdownItems.forEach(item => {
      if (item.textContent.trim() === 'Apoyo') {
        item.textContent = 'Soporte';
      }
    });
  }

  // 页面初始加载时执行一次替换
  updateMenuItemText();

  // 监听DOM变化，处理动态加载的元素（应对Thinkific单页渲染场景）
  const observer = new MutationObserver(() => {
    updateMenuItemText();
  });

  // 监听body下所有子节点的变化
  observer.observe(document.body, { childList: true, subtree: true });
});
</script>

关键说明

为什么不用:contains伪类：原生JS的querySelector不支持CSS的:contains伪类，这大概率是你之前尝试W3Schools教程失败的原因，改用遍历+文本匹配的方式兼容性更好。
适配动态渲染：Thinkific部分页面内容是动态加载的（比如单页导航切换），通过MutationObserver监听DOM变化，能确保菜单渲染完成后自动执行替换。
精准选择器调整：如果目标菜单项有唯一标识（比如特定href属性），可以把选择器改成更精准的形式，比如：
```
const targetItem = document.querySelector('a.dropdown-item[href="/your-apoyo-url"]');
if (targetItem) targetItem.textContent = 'Soporte';
```
这样能避免误匹配其他相似文本的元素。