Bootstrap 4：單擊下拉項時如何關閉下拉菜單？

Question

我在導航欄中有一個 Bootstrap 下拉菜單。 您需要單擊菜單將其打開。 如果您在菜單外單擊，它將關閉。 如果您單擊其中一項（類下拉項），它會保持打開狀態。 我想在單擊菜單項時關閉它。 我發現的所有項目都引用了早期版本的 Bootstrap。

這是我的代碼。 當我進入網站時第一次單擊菜單項時，菜單關閉。 下次我單擊菜單項時，它仍保持打開狀態。

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

我假設我將需要使用 Javascript，但我不確定如何編寫解決方案。 我的 Rails 應用程序中確實有 jQuery。 這是我用於 nav pills 的代碼，用於在單擊選項卡鏈接時顯示我的選項卡內容。

$(window).load(function() {

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

})

我嘗試了這兩種方法，但沒有用。

$(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");
  })

})

Answer 1

我記得我還在下拉菜單中使用了 SmoothScroll 腳本。 該腳本是為類頁面滾動執行的。 我找到類page-scroll的JS代碼，並在頁面滾動代碼之前添加了以下代碼。

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

當菜單項按預期單擊時，下拉菜單將關閉。

Answer 2

試試這個

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

Answer 3

使用默認引導下拉菜單

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