Bootstrap 5.2:Webpack和Javascript的崩溃问题

Question

我正在使用Webpack 5.74.0开发一个使用HTML、SASS和JS的项目。

我想使用Bootstrap 5来实现可折叠，这是我刚刚完成的一个功能。因为我无法使它工作，我试着从文档中复制/粘贴示例，看看哪里出了问题

以下是示例：

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>

我正在使用Webpack的html-loader(doc(的模板功能在页面中插入带有JS:

Webpack.config:的HTML文件

module: {
rules: [
...
{
test: /.html$/i,
loader: 'html-loader',
}
]
}

绘制页面的JavaScript代码：

import collapseExample from '../templates/collapseExample.html'
...
body.insertAdjacentHTML('beforeend',collapseExample)
//collapseExample being a string from the source code

构建时，页面显示示例中的两个按钮，并且div#collapseExample处于隐藏状态。这段代码与文档中的示例完全相同，所以我不认为html-loader有错

但是当我单击任一按钮时，都不会发生任何事情。控制台中没有错误，并且div#collapseExample根本没有显示。我在尝试使用自己的代码时也遇到了同样的问题(因为该功能隐藏得很好，但当我点击按钮时什么都没发生(

我使用本地服务器(webpack serve --open --config {my Webpack config file}(和Webpack将构建文件放入dist时都进行了构建。问题仍然存在。我正在使用最新的Firefox

我想做的事情出了什么问题？谢谢你的帮助。

Answer 1

您可以尝试手动初始化可折叠的吗？也许它是在bootstrap添加侦听器之后添加的。

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
toggle: false
})

让我们也试试按钮的click事件(用于调试目的(

var bsCollapse = new bootstrap.Collapse('#collapseExample', {
toggle: false
})
bsCollapse.toggle()