Bootstrap 4: Как закрыть выпадающее меню при нажатии на выпадающий элемент? - PullRequest
Новая
       51

Bootstrap 4: Как закрыть выпадающее меню при нажатии на выпадающий элемент?

1 голос
/ 17 апреля 2019

У меня есть выпадающее меню Bootstrap на панели навигации.Вам нужно нажать на меню, чтобы открыть его.Если вы щелкнете за пределами меню, оно закроется.Если щелкнуть один из элементов (класс dropdown-item), он останется открытым.Я хотел бы закрыть его при нажатии на пункт меню.Все предметы, которые я нашел, ссылаются на более раннюю версию 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, но я не уверен, как кодировать решение.У меня есть jQuery в моем приложении Rails.Вот код, который я использую для навигационных таблеток для отображения содержимого вкладки при нажатии на ссылку вкладки. 

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

})

Ответы [ 2 ]

0 голосов
/ 18 апреля 2019

Я вспомнил, что я также использую скрипт SmoothScroll в выпадающем меню. Этот скрипт выполняется для прокрутки страницы класса. Я нашел код JS для прокрутки страниц класса и добавил следующий код перед кодом прокрутки страницы. 

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

Раскрывающееся меню закрывается, когда элемент меню щелкает, как ожидалось.

0 голосов
/ 17 апреля 2019

попробуйте 

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