Bootstrap 4：单击下拉项时如何关闭下拉菜单？答案

【问题标题】：Bootstrap 4: How Do I Close a dropdown-menu when a dropdown-item is clicked?Bootstrap 4：单击下拉项时如何关闭下拉菜单？
【发布时间】：2019-04-17 20:33:27
【问题描述】：

我在导航栏中有一个 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。这是我用于导航丸的代码，用于在单击选项卡链接时显示我的选项卡内容。

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

})

【问题讨论】：

标签： javascript jquery ruby-on-rails drop-down-menu bootstrap-4

【解决方案1】：

我记得我还在下拉菜单中使用了 SmoothScroll 脚本。该脚本是为类页面滚动执行的。找到了page-scroll类的JS代码，在页面滚动代码前添加了如下代码。

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

当菜单项按预期点击时，下拉菜单关闭。

【讨论】：

【解决方案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>

【讨论】：

它没有用。我需要编写 JS 代码来关闭它。我刚刚意识到需要将代码添加到我用于类页面滚动的脚本中。该脚本将页面缓慢滚动到页面上的选定位置。

【解决方案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>

【讨论】：