Bootstrap 4: How Do I Close a dropdown-menu when a dropdown-item is clicked?

Question

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-item), it remains open. I would like to close it when a menu item is clicked. All of the items I have found are referencing earlier version of Bootstrap.

Here is my code. The first time I click a menu item when I enter the website, the menu closes. The next time I click a menu item it remains open.

<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>

I assume I will need to use Javascript but I'm not sure how to code the solution. I do have jQuery in my Rails application. Here is code that I use for nav pills to display my tab-content when the tab link is clicked.

$(window).load(function() {

  $('#appPills a', '#vrPills a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })

})

I tried both of these but it did not work.

$(window).load(function() {

  $('.dropdown-item a').click(function (e) {
    $(".dropdown-menu").toggleClass("close");
  })

})

$(window).load(function() {

  $('.dropdown-item').click(function (e) {
    $(".dropdown-menu").toggleClass("close");
  })

})

score 1 · Answer 1 · answered Apr 17 '19 at 22:05

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.

score 0 · Answer 2 · answered Apr 17 '19 at 20:59

0

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>

answered Apr 17 '19 at 20:59

kam773

83
2
10

It did not work. I will need to write JS code to close it. I just realized that code will need to be added to the script I'm using for class page-scroll. That script slowly scrolls the page to the selected location on the page. – Pamela Cook - LightBe Corp Apr 17 '19 at 21:38

score 0 · Answer 3 · answered Dec 31 '19 at 06:31

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>

Bootstrap 4: How Do I Close a dropdown-menu when a dropdown-item is clicked?

3 Answers3

Linked