Question

当导航栏切换到下拉菜单时，我想在单击选项时将其关闭。

这是我的导航栏html。

<nav class="navbar fixed-top navbar-expand-lg navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <%= link_to locale_root_path(anchor: "top"), class: "navbar-brand page-scroll" do %>
        <span class="text-red">Light</span><span class="text-blue">Be Corp</span>
      <% end %>
    </div>
    <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target=".navbar-main-collapse"> <i class="fas fa-bars"></i> </button>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-right navbar-main-collapse">

      <ul class="navbar-nav ml-auto">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden"> <a href="#top"></a> </li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_about}", locale_root_path(anchor: "about"), class: "page-scroll" %></li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_services}", locale_root_path(anchor: "services"), class: "page-scroll" %></li>
        <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>
        <li class="nav-item nav-link"><%= link_to "#{t :link_portfolio}", locale_root_path(anchor: "works"), class: "page-scroll" %></li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_contact}", locale_root_path(anchor: "contact"), class: "page-scroll" %></li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_story}", story_path %></li>
        <li class="nav-item nav-link"><%= link_to "#{t :link_blog}", blog_path %></li>
        <li class="nav-item nav-link"><%= link_to "https://www.facebook.com/LightBeCorp/", target: "_blank" do %><i class="fab fa-facebook-f"></i><% end %></li>
        <li class="nav-item nav-link"><%= link_to "https://twitter.com/lightbecorp", target: "_blank" do %><i class="fab fa-twitter"></i><% end %></li>
      </ul>
    </div>
    <!-- /.navbar-collapse --> 
  </div>
  <!-- /.container --> 
</nav>

我想出了如何通过常规下拉菜单执行此操作。有关详细信息，请参见此post。

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

我需要有关如何为导航栏开发代码的帮助。我尝试了以下方法，但没有一个起作用。

$(".collapse").dropdown('hide')

$(".navbar-main-collapse").dropdown('hide')

$(".navbar-nav").dropdown('hide')

Answer 1

在这里尝试其他搜索后，我发现了一些可行的方法。我只需要知道与哪个类一起使用即可完成Bootstrap 4。

[(65, '='), (1, 'X')] , 66 , X
[(65, '='), (1, 'X'), (91, '='), (3, 'D')] , 160 , D
[(65, '='), (1, 'X'), (91, '='), (3, 'D'), (60, '='), (1, 'X')] , 221 , X

How to hide collapsible Bootstrap 4 navbar on click

Bootstrap 4：如何在单击菜单选项后关闭主下拉导航栏？

1 个答案: