Bootstrap 4: How Do I Close A Dropdown-menu When A Dropdown-item Is Clicked?

I have a Bootstrap dropdown menu in a navbar. You need to click the menu to open it. If you click outside of the menu, it will close. If you click one of the items (class dropdown-

Solution 1:

I remembered that I also use a SmoothScroll script in the dropdown menu. That script is executed for class page-scroll. I found the JS code for class page-scroll and added the following code before the page scrolling code.

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

The dropdown menu closes when the menu item clicks as expected.

Solution 2:

try this

    <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Solution 3:

Use Default bootstrap dropdown

 <ul class="scrollToSection navbar-nav">
          <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Menu </a>
            <div class="dropdown-menu">
              <div class="col title-block">
                <ul class="scrollToSection navbar-nav">
                  <li class="nav-item dropdown"> <span class="nav-link dropdown-toggle"> Small Plates</span>
                    <div class="dropdown-menu">
 <a class="nav-link dropdown-item active" href="#garden">The Garden</a>
 <a class="nav-link dropdown-item" href="#sea">Sea</a> 
<a class="nav-link dropdown-item" href="#sides">Sides</a>
 <a class="nav-link dropdown-item" href="#farm">Farm</a> </div>
                  </li>
                </ul>
              </div>

            </div>
          </li>
        </ul>