我正在使用Ruby on Rails开发我的网站。最近我的任务是实现Bootstrap而不是自定义CSS样式。没有问题。但是，当我使用Bootstrap的Offcanvas菜单时，问题就出现了。第一次单击时，会出现两次淡入淡出效果，然后如果我从网站的另一个部分访问Offcanvas菜单，淡入淡出效果会加倍，等等。如果我刷新页面，淡入淡出的数字回到两个淡入淡出。这些淡入淡出被表示为div，如下所示（当用户点击菜单时，这些是自动生成的）：
<div class="offcanvas-backdrop fade show"></div>
此外，当我单击关闭按钮（从Bootstrap）时，它会删除所有的淡入淡出div，无论有多少，这是我希望单击关闭菜单的预期效果。
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
有没有什么方法可以让我点击菜单，让褪色完全消失，而不是必须删除2，然后4，等divs从我的屏幕上（像按钮）？
以下是我的完整Offcanvas部分的文件：

<nav class="navbar navbar-light bg-light fixed-top">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
            <div class="offcanvas-header">
              <a class="nav-link" href="/support/search" id="logo_img"><%= image_tag "logo.png"%></a>
              <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
              <ul class="navbar-nav justify-content-start flex-grow-1 pe-3">
                <li class="nav-item">
                  <a class="nav-link" href="/support/search">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/support/show_num_of_registered_users">Statistics</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/support/show_appusers_referrals2">Referrals over 30</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/support/claims">Claims</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/deletedaccs">Delete user</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/support/get_new_emails">Get new referral emails</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/manigo_hooks">Manigo Hooks</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/stakings">Stakings</a>
                </li>
                <% if !current_admin.superadmin.nil? && current_admin.superadmin?%>
                  <li class="nav-item">
                    <a class="nav-link" href="/support/get_voucher_count">Voucher count</a>
                  </li>
                <% end %>
                <%= form_with url: "/support/search_res", class: "d-flex", method: :get do |form| %>
                  <%= form.text_field :query, class: "form-control me-2", placeholder: "Search...", onpaste: 'pasteAndGo()' %>
                  <button class="btn btn-outline-success" id="nav_search">Search</button>
                <% end %>
              </ul>
            </div>
          </div>
        </div>
      </nav>

编辑：我可以将它从双倍减少到每个页面只复制一次。所以，当第一次使用时，它可以正常工作。我所做的只是将Bootstrap脚本标记作为一个组合而不是作为一个二进制导入：
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
编辑2：我写了下面的JS函数：

let fade = document.getElementsByClassName('offcanvas-backdrop fade show')
      for(let i = 0; i < fade.length; i++) {
        if(fade.length > 1) {
          fade[i].remove()
        }
      }
    }

这将删除您第一次访问页面时的额外淡入淡出。如果您转到另一个页面，然后返回到原始页面（在那里它第一次有多个淡入淡出开始）它只是堆叠另一个淡入淡出出于某种原因。而且，当页面第一次访问时，每隔一次点击按钮打开OffCanvas菜单，它删除了整个菜单，而不是淡入淡出。我假设淡入淡出和菜单是一个字段。这是令人沮丧的。
编辑3：我现在已经重做了我的JS函数。菜单仍然每隔一次显示（除了最初访问的第一个页面），但是淡入淡出现在被正确地删除了。如果我能弄清楚如何让菜单每次都显示，并且让淡入淡出显示一次，我将发布解决方案。现在，这里是JS代码：

function removeExtraFade() {
      let fade = document.getElementsByClassName('offcanvas-backdrop fade show')
      for(let i = 0; i < fade.length; i++) {
        while(fade.length > 1) {
          fade[i].remove()
        }
      }
    }