如何修复正在扩展（下降）但不折叠（返回）的导航栏？

Question

我有一个导航栏，在低于特定屏幕尺寸时有一个汉堡包切换。我的问题是导航栏下降（正确扩展）但不会再次上升（折叠）。

我试图检查其他论坛和关于同一问题的相同问题，但没有任何帮助。我肯定需要一些茶点，因为我已经有一段时间没有编写 JS 代码了。

<nav class="navbar navbar-expand-md navbar-light white-background">

  <%= link_to root_path, class: "navbar-wagon-brand" do %>

    <%= image_tag "logo.jpg" %>

  <% end %>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse " id="navbarSupportedContent">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item">

        <a class="nav-link" href="#motto"><%= t('about_title') %></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#services"><%= t('solution_title') %></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#why"><%= t('benefits_title') %></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#team"><%= t('team_title') %></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#partners"><%= t('clients_title') %></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#contact_us"><%= t('contact_us') %></a>

      </li>

    </ul>

    <ul class="navbar-nav mr-auto">

      <li class="nav-item">

        <a class="nav-link" href="https://www.enso-value.com/?locale=en"><%= image_tag("english_flag.png", class: "fit-image-flag") %></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="https://www.enso-value.com/?locale=nl"><%= image_tag("netherlands_flag.png", class: "fit-image-flag") %></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="https://www.enso-value.com/?locale=fr"><%= image_tag("french_flag.png", class: "fit-image-flag") %></a>

      </li>

    </ul>

  </div>

</nav>

我希望导航栏能够正常工作。