Bootstrap 4: How Do I Close The Main Dropdown Navbar after clicking a Menu Option?

Question

When the navbar switches to a dropdown menu, I want to close it when an option is clicked.

Here is my navbar 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>

I figured out how to do this with a regular dropdown menu. The details about this are on this post .

$("#navbarDropdown").dropdown('hide')

I need help on how to develop the code for the navbar. I tried the following but none of them worked.

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

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

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

Answer 1

After trying another search here, I was able find something that worked. I just needed to know which class to work with to get this done for Bootstrap 4.

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

How to hide collapsible Bootstrap 4 navbar on click