Bootstrap 5 导航栏下拉菜单间歇性失效问题求助

各位大佬，我现在碰到一个特别闹心的问题，想请大家帮忙看看：

我正在用 Bootstrap 5 搭建网站，为了复用导航栏，把它单独写成了一个navbar.html文件，然后在所有内容页面里用 jQuery 的load方法来加载，每个页面的加载代码都是完全一样的：

<!-- Nav bar -->
<div id="navbar"></div>
<script>
$(function () {
  $("#navbar").load("/navbar.html")
});
</script>

导航栏里既有普通链接，也有下拉菜单。现在的问题是：普通链接在所有页面都正常工作，但下拉菜单是间歇性失效的——有时候点一下能正常展开，有时候怎么点都没反应，哪怕是同一个页面，刷新几次也会时好时坏，我完全摸不到规律...

我已经尝试过把导航栏文件从完整的 HTML 文档改成仅包含导航栏的代码片段，但问题还是没有解决。

下面是我导航栏的代码（部分文本做了模糊处理）：

<div class="container px-5">
  <!-- Navigation bar -->
  <div class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="/index.html"><img src="/images/logo.jpg" height="100"></a>
    <!-- Further content -->
    <div class="collapse navbar-collapse d-flex align-items-center justify-content-end" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-md-0">
        <!-- Home page -->
        <li class="nav-item">
          <a class="nav-link active" href="/index.html">Home</a>
        </li>
        <!-- Dropdown 1 -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle active" href="#" id="dropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown 1</a>
          <!-- Dropdown 1 listing -->
          <ul class="dropdown-menu" aria-labelledby="dropdown1">
            <li><a class="dropdown-item" href="/item1.html">Item 1</a></li>
            <li><a class="dropdown-item" href="/subfolder1/item2.html">Item 2</a></li>
            <li><a class="dropdown-item" href="/subfolder1/item3.html">Item 3</a></li>
            <li><a class="dropdown-item" href="/subfolder1/item4.html">Item 4</a></li>
            <li><a class="dropdown-item" href="/subfolder1/item5.html">Item 5</a>
            </li>
            <li><a class="dropdown-item" href="/subfolder1/item6.html">Item 6</a></li>
            <li><a class="dropdown-item" href="/subfolder1/item7.html">Item 7</a></li>
            <li><a class="dropdown-item" href="/subfolder1/item8.html">Item 8</a></li>
          </ul>
        </li>
        <!-- Normal link -->
        <li class="nav-item">
          <a class="nav-link active" href="/normal1.html">Normal link 1</a>
        </li>
        <!-- Dropdown 2 -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle active" href="#" id="dropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown 2
          </a>
          <!-- Dropdown 2 listing -->
          <ul class="dropdown-menu" aria-labelledby="dropdown2">
            <li><a class="dropdown-item" href="/item9.html">Item 9</a></li>
            <li><a class="dropdown-item" href="/subfolder2/item10.html">Item 10</a></li>
            <li><a class="dropdown-item" href="/subfolder2/item11.html">Item 11</a></li>
            <li><a class="dropdown-item" href="/subfolder2/item12.html">Item 12</a></li>
          </ul>
        </li>
        <!-- Dropdown 3 -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle active" href="#" id="dropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown 3
          </a>
          <!-- Dropdown 3 listing -->
          <ul class="dropdown-menu" aria-labelledby="dropdown3">
            <li><a class="dropdown-item" href="/subfolder3/item13.html">Item 13</a></li>
            <li><a class="dropdown-item" href="/subfolder3/item14.html">Item 14</a></li>
          </ul>
        </li>
        <!-- Normal link -->
        <li class="nav-item">
          <a class="nav-link active" href="/normal2.html">Normal link 2</a>
        </li>
      </ul>
    </div>
  </div>
</div>

实在是搞不懂为什么会这样，有没有大佬能帮我分析下问题出在哪呀？

内容来源于stack exchange