Bootstrap 4:单击下拉菜单项后如何关闭下拉菜单? [英] Bootstrap 4: How Do I Close a dropdown-menu when a dropdown-item is clicked?

问题描述

我在导航栏中有一个Bootstrap下拉菜单.您需要单击菜单将其打开.如果您在菜单外单击，它将关闭.如果单击其中一项(类下拉项)，则该项将保持打开状态.单击菜单项时，我想关闭它.我发现的所有项目都引用了较早版本的Bootstrap.

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>

我假设我将需要使用Javascript，但是我不确定如何编写解决方案的代码.我在Rails应用程序中确实有jQuery.这是我单击导航标签时用于导航药丸以显示标签内容的代码.

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

})

推荐答案

使用默认引导程序下拉列表

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:单击下拉菜单项后如何关闭下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！