部署后网站下拉菜单失效问题排查求助

问题背景 #

用R Markdown搭建的静态HTML个人网站，数年前配置的YAML生成的下拉菜单原本正常。近期更新项目并通过Netlify重新部署后，本地生成的index.html下拉菜单点击可正常展开，但部署完成后点击无反应。检查发现点击「Projects」后，<li>的dropdown类未切换为dropdown open，手动修改类名后菜单可正常展开。

原YAML配置 #

name: "personal-website"
output_dir: "."
title: "Personal Website"
left:
  - text: "Home"
    href: index.html
  - text: "About Me"
    href: a.html 
  - text: "Projects" 
    menu: 
      - text: "Class Projects"
      - text: "P1"
        href: a.html
      - text: "---------"
      - text: "Personal Projects"
      - text: "P2" 
        href: a.html
output:
  html_document:
    theme: flatly
    css: style.css

问题相关代码 #

自定义CSS #

img {
  height: 500px;
  width: 75%;
  display: block;
  margin: 0 auto;
}

下拉菜单HTML结构 #

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Projects
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
    <li class="dropdown-header">Class Projects</li>
    <li>
      <a href="a.html">P1</a>
    </li>
    <li class="divider"></li>
    <li class="dropdown-header">Personal Projects</li>
    <li>
      <a href="a.html">P2</a>
    </li>
  </ul>
</li>

诊断分析 #

• 排除Netlify部署工具问题：Netlify仅负责静态文件的托管与分发，不会主动修改HTML文件的结构或内容（除非配置了未提及的Post处理规则）。本地文件正常、部署后异常，说明问题出在部署后静态文件与本地文件的兼容性差异，而非Netlify本身。
• HTML结构的Bootstrap语法冲突：
  观察HTML代码，<a>标签同时存在data-toggle="dropdown"（Bootstrap 3语法）和data-bs-toggle="dropdown"（Bootstrap 5语法），这会导致JS事件绑定冲突。
  本地环境可能加载了兼容旧版语法的Bootstrap资源，能处理混合语法；但部署后，可能因资源加载优化（如CDN缓存的新版本Bootstrap）导致旧语法失效，无法触发类名切换逻辑。下拉菜单展开的核心是Bootstrap JS组件触发open类的添加，若JS事件未正确绑定，就不会自动切换类名。

结论 #

问题出在HTML结构的Bootstrap语法冲突，与Netlify无关。

修复方案 #

• 统一Bootstrap语法：根据实际使用的Bootstrap版本，保留对应的数据属性：
  • 若使用Bootstrap 3：仅保留data-toggle="dropdown"，移除data-bs-toggle="dropdown"
  • 若使用Bootstrap 5：仅保留data-bs-toggle="dropdown"，移除data-toggle="dropdown"
• 明确指定Bootstrap版本：在R Markdown的YAML配置中锁定Bootstrap版本，避免自动更新导致的兼容性问题。

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