如何解决不能切换 Bootstrap 5 js 未正确初始化?
我的 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
此外,我将分享一些图片来展示我在重新加载页面后切换时发生的转换。
我的原始状态是这样的。
切换导航栏时,它会按预期转换:
它最终处于展开状态:
但是当我按下导航栏切换图标时,导航栏不会折叠。相反,它会从展开状态(第二张图片)过渡到展开状态(第三张图片)。
解决方法
刚刚使用您的配置代码尝试了 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 的插件加载到一个引导对象上。
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。