引导导航栏切换器仅在第一次单击时工作

Question

我的导航栏折叠了，但是在折叠时出现的汉堡按钮是不可点击的。我使用的是Bootstrap 4.3.1 & Rails 6。我将jQuery从3.5.0降级到了3.4.1。按照建议的here，先执行yarn remove jquery & yarn add jquery@3.4.1，然后执行yarn install --check-files。我还删除了app/node_modules中的jquery文件夹，并用前面提到的代码重新安装了它，但它没有改变任何东西。我只想提一下，即使在重新安装jQuery之后，该文件夹也没有添加到node_modules中。我不知道这是否重要，但我的jQuery动画仍然有效。

这是我的部分_app_nav

<%= render :layout => "layouts/base" do %>
  <nav class="navbar navbar-expand-lg">
    <a href="<%= posts_path %>" class="navbar-brand"><%= image_tag image_path('logos/edukado_white.png'), width: 140, class: 'mr-2'%></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item <%= 'active' if current_page?(posts_path) %>">
          <a class="nav-link" href="<%= posts_path %>">Accueil</a>
        </li>
        <li class="nav-item <%= 'active' if current_page?(new_post_path) %>">
          <a class="nav-link" href="<%= new_post_path %>">Publier</a>
        </li>
        <li class="nav-item <%= 'active' if current_page?(new_user_invitation_path) %>">
          <a class="nav-link" href="<%= new_user_invitation_path %>">Inviter</a>
        </li>
        <% if user_signed_in? %>
          <li class="nav-item <%= 'active' if current_page?(posts_user_path(current_user)) %>">
            <a class="nav-link" href="<%= posts_user_path(current_user) %>">Mes publications</a>
          </li>
        <% end %>
      </ul>
      <%= render partial: 'layouts/navbar' %>
    </div>
  </nav>
  <%= yield %>
<% end %>

我的application.js文件：

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.


// ***** START: ADDED BY KisoThemes *****
window.$ = window.jQuery = require("jquery")
// ***** END: ADDED BY KisoThemes *****

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// ***** START: ADDED BY KisoThemes *****
require("bootstrap")
require("metismenu/dist/metisMenu")
require("jquery-slimscroll")
require('bootstrap-switch')
require('chartjs')
require('jquery-countdown')
require('jquery-countto')
require('cd-easypiechart')
require('fastclick')
require('object-fit-images')
require('flot/source/jquery.canvaswrapper');
require('flot/source/jquery.flot');
require('gmaps.core')
require('jasny-bootstrap')
require('jvectormap')
require('jquery-parallax.js')
require('code-prettify')
require('prismjs')
require('sparklines')
// ***** END: ADDED BY KisoThemes *****




// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

require("trix")
require("@rails/actiontext")
require("kiso_themes")

提前感谢您的帮助！

Answer 1

使用bootstrap 5和Rails 6，我通过在按钮类中更改来修复它

data-toggle="collapse" data-target="#navbarSupportedContent"

到这个

data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"