Bootstrap 4: Как закрыть главный выпадающий Navbar после выбора опции меню? - PullRequest
Новая
       19

Bootstrap 4: Как закрыть главный выпадающий Navbar после выбора опции меню?

0 голосов
/ 02 мая 2019

Когда навигационная панель переключается в раскрывающееся меню, я хочу закрыть его при нажатии какой-либо опции.

Вот мой HTML-код navbar. 

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

Я понял, как это сделать с помощью обычного выпадающего меню. Подробности об этом сообщение . 

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

Мне нужна помощь в разработке кода для панели навигации. Я попробовал следующее, но ни один из них не сработал. 

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

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

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

1 Ответ

0 голосов
/ 02 мая 2019

Попробовав другой поиск здесь, я смог найти что-то, что сработало. Мне просто нужно было знать, с каким классом работать, чтобы сделать это для Bootstrap 4. 

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

Как скрыть складную навигационную панель Bootstrap 4 при нажатии

...