Javascript 引导程序4：单击菜单选项后如何关闭主下拉导航栏？

当导航栏切换到下拉菜单时，我希望在单击某个选项时将其关闭

这是我的导航栏html

<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <%= link_to locale_root_path(anchor: "top"), class: "navbar-brand page-scroll" do %>
        <span class="text-red">Light</span><span class="text-blue">Be Corp</span>
      <% end %>
    </div>
    <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fas fa-bars"></i> </button>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-right navbar-main-collapse">

      <ul class="navbar-nav ml-auto">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden"> <a href="#top"></a> </li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_about}", locale_root_path(anchor: "about"), class: "page-scroll" %></li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_services}", locale_root_path(anchor: "services"), class: "page-scroll" %></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <%= "#{t :link_products}" %>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <div class="dropdown-item"><%= link_to "#{t :link_app}", locale_root_path(anchor: "games"), class: "page-scroll" %></div>
            <div class="dropdown-item"><%= link_to "#{t :link_vr}", locale_root_path(anchor: "vrsection"), class: "page-scroll" %></div>
            <div class="dropdown-item"><%= link_to "#{t :link_tesserart}", locale_root_path(anchor: "tesserartview"), class: "page-scroll" %></div>
            <div class="dropdown-item"><%= link_to "#{t :link_books}", locale_root_path(anchor: "booksview"), class: "page-scroll" %></div>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item"><%= link_to "#{t :link_home}", locale_root_path %></div>
          </div>
        </li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_portfolio}", locale_root_path(anchor: "works"), class: "page-scroll" %></li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_contact}", locale_root_path(anchor: "contact"), class: "page-scroll" %></li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_story}", story_path %></li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_blog}", blog_path %></li>
        <li class="nav-item nav-link"><%= link_to "https://www.facebook.com/LightBeCorp/", target: "_blank" do %><i class="fab fa-facebook-f"></i><% end %></li>
        <li class="nav-item nav-link"><%= link_to "https://twitter.com/lightbecorp", target: "_blank" do %><i class="fab fa-twitter"></i><% end %></li>
      </ul>
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container --> 
</nav>

我需要关于如何开发导航栏代码的帮助。我尝试了以下方法，但没有一个奏效

$(".collapse").dropdown('hide')

$(".navbar-main-collapse").dropdown('hide')

$(".navbar-nav").dropdown('hide')

---

在这里尝试了另一次搜索之后，我找到了一些有用的东西。我只需要知道使用哪个类来完成Bootstrap4

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

---

为什么选择向下投票？如果导航项中有下拉菜单，请使用“.navbar nav li a”

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});