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

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

Solution 3:

Use Default bootstrap dropdown

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