Блог

Я не могу заставить выпадающий список панели навигации начальной загрузки работать стабильно.

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

Я работаю над приложением Rails 6 с Bootstrap 4.5. Я в значительной степени скопировал пример кода панели навигации из их документов, заполнил пути ссылок и скорректировал идентификатор. (Я также удалил переключатель, пытающийся устранить неполадки)

Если это поможет, у меня возникли аналогичные проблемы с тем, что функциональность свертывания начальной загрузки не работает стабильно.

просмотры / макеты /application.html.haml:

 %html
  %head
    %link{:crossorigin => "anonymous", :href => "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css", :integrity => "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2", :rel => "stylesheet"}/


    %title
      @title

    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    = csrf_meta_tags
    = csp_meta_tag

  %body
    .container
      = render "layouts/nav"
      %p.notice.hide= notice
      %p.alert.hide= alert
      = yield
      .footer

    %script{:crossorigin => "anonymous", :integrity => "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj", :src => "https://code.jquery.com/jquery-3.5.1.slim.min.js"}
    %script{:crossorigin => "anonymous", :integrity => "sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx", :src => "https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"}
 

просмотры / макеты/_nav.html/haml:

 %nav.navbar.navbar-expand.navbar-light.bg-light
  %a.navbar-brand{:href => root_path} Home
  #navbarSupportedContent
    %ul.navbar-nav.mr-auto
      %li.nav-item.dropdown
        %a#navbarDropdownOne.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "#", :role => "button"}
          Planner
        .dropdown-menu{"aria-labelledby" => "navbarDropdownOne"}
          %a.dropdown-item{:href => events_path} Events
          %a.dropdown-item{:href => setups_path} Setups
          %a.dropdown-item{:href => event_sessions_path} Event Sessions
          %a.dropdown-item{:href => setup_answers_path} Setup Answers

      %li.nav-item.dropdown
        %a#navbarDropdownTwo.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "#", :role => "button"}
          Supplier
        .dropdown-menu{"aria-labelledby" => "navbarDropdownTwo"}
          %a.dropdown-item{:href => setup_categories_path} Setup Categories
          %a.dropdown-item{:href => questions_path} Questions
          %a.dropdown-item{:href => multiple_choices_path} Multiple Choices
          %a.dropdown-item{:href => template_items_path} Template Items
          %a.dropdown-item{:href => template_answers_path} Template Answers
          %a.dropdown-item{:href => items_path} Items

      %li.nav-item.dropdown
        %a#navbarDropdownThree.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :href => "#", :role => "button"}
          Admin
        .dropdown-menu{"aria-labelledby" => "navbarDropdownThree"}
          %a.dropdown-item{:href => user_path(current_user)} Your Account
          %a.dropdown-item{:href => users_path} Users
 

Кажется, я случайно нашел решение этой проблемы, когда выполнял несвязанный учебник. (С использованием react w / rails)

Вместо того, чтобы точно следовать инструкциям из документов bootstrap 4.5, в терминале я запустил:

 yarn add bootstrap jquery popper.js
 

Затем в app/javascript/packs/application.js У меня есть:

 require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require('bootstrap')
import 'bootstrap/dist/css/bootstrap'
 

Я удалил ссылки на таблицы стилей и скрипты и вместо этого установил «stylesheet_pack_tag» для app / views / layouts / application.html.haml:

 %html
  %head
    %title
      = @title

    = csrf_meta_tags
    = csp_meta_tag

    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    = stylesheet_pack_tag 'application'


  %body
    .container
      - if current_user
        = render "layouts/nav"
      %p.notice.hide= notice
      %p.alert.hide= alert
      = yield
      .footer