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

Posted 2023-02-15

【中文标题】无法切换。 Bootstrap 5 js 未正确初始化？

【英文标题】：Can't toggle. Bootstrap 5 js not initialized properly?

【发布时间】：2021-06-11 07:11:47

【问题描述】：

我的 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 为我的 Ruby on Rails 应用程序打包资产（使用 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

另外，我分享了几张图片来展示我在重新加载页面后切换时发生的转换。

我原来的状态是这样的。

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

它最终处于展开状态：

但是当我按下导航栏切换器图标时，导航栏不会折叠。相反，它会过渡到展开状态（第二张图片）并最终进入展开状态（第三张图片）。

【问题讨论】：

尝试将window.bootstrap = require(...) 更改为import * from 'bootstrap' 也许对你有帮助。

【参考方案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') 或 import bootstrap from 'bootstrap' 会将 Bootstrap 的所有插件加载到 bootstrap 对象中。

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

【讨论】：

伟大的@eux 这两行都解决了这个问题。只有这会导致其他问题。如果我在自己的 js 文件中引用bootstrap，我会得到Uncaught ReferenceError: bootstrap is not defined。例如，我有一个包含这样的文件：import "../javascripts/bootstrap_toast"，并在该文件中运行new bootstrap.Toast(my_toast_elm, ).show();。那么如何在更大范围内共享新的bootstrap const？

你可以像config/webpack/environment.js中的'Popper'一样全局加载bootstrap对象，查看更新答案的详细信息。

完美，成功了。可以在 10 小时内奖励赏金 :-)

很高兴为您提供帮助：)