无法切换。 Bootstrap 5 js没有正确初始化？

Question

我的 Bootstrap 5.0.0-beta2 实施有问题。我可以展开我的导航栏和手风琴，但不能折叠它们。

好像是js初始化的问题

因为如果我加载一个没有元素的页面，然后浏览到一个有元素的页面（我的页面不会重新加载，因为我正在使用 hotwire/Turbo），我可以展开和折叠它们.虽然这些错误在切换时打印到控制台：

Uncaught TypeError: No method named "toggle"
    at Function.collapseInterface (bootstrap.bundle.js:1942)
    at bootstrap.bundle.js:2001
    at Array.forEach (<anonymous>)
    at HTMLButtonElement.<anonymous> (bootstrap.bundle.js:1985)
    at HTMLDocument.handler (bootstrap.bundle.js:414)

知道我应该做些什么吗？

我正在使用 webpack 为 Rails 应用程序上的 Ruby 打包我的资产（使用 webpacker gem）。这是我的 webpacker 设置：

// app/javascript/packs/application.js

import Rails from "@rails/ujs"
import { Turbo } from "@hotwired/turbo-rails"
import "bootstrap"
import "../stylesheets/application"
window.Turbo = Turbo
window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js')
Rails.start()

/* app/javascript/stylesheets/application.scss */

@import "~bootstrap/scss/bootstrap";

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    Rails: '@rails/ujs',
    Popper: ['popper.js', 'default']
  })
)
module.exports = environment

此外，我分享了一些图片来展示重新加载页面后切换时发生的过渡。

我原来的状态是这样的。

切换导航栏时，它会像预期的那样转换：

它最终处于展开状态：

但是当我按下导航栏开关图标时，导航栏不会折叠。相反，它通过展开状态（第二张图片）过渡并最终处于展开状态（第三张图片）。

Answer 1

刚刚使用您的配置代码尝试 Bootstrap 5.0.0-beta2、Rails 6.1。

问题似乎是您加载 bootstrap 对象的方式，即行：

// Conflict somehow
window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js')

您可以使用 const require 或 import 代替 Doc:

const bootstrap = require('bootstrap') or import bootstrap from 'bootstrap' will load all of Bootstrap’s plugins onto a bootstrap object.

const bootstrap = require('bootstrap') // or
import bootstrap from 'bootstrap'

或者您可以全局加载 bootstrap 对象：

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    Rails: '@rails/ujs',
    Popper: ['popper.js', 'default'],
    bootstrap: ['bootstrap']
  })
)

module.exports = environment

无法切换。 Bootstrap 5 js没有正确初始化？

Can't toggle. Bootstrap 5 js not initialized properly?

javascript

ruby-on-rails

twitter-bootstrap

webpacker

bootstrap-5