我正在開發一個使用 HTML、SASS 和 JS 和 Webpack 5.74.0 的專案。
我想使用 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 的頁面中插入 HTML 檔案：
webpack.config ：
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。
我想做的事情有什么問題？感謝您的幫助。
uj5u.com熱心網友回復：
您可以嘗試手動初始化可折疊設備嗎？也許它是在引導程式添加其偵聽器之后添加的。
const bsCollapse = new bootstrap.Collapse('#myCollapse', {
toggle: false
})
讓我們也嘗試一下click按鈕事件（用于除錯目的）
var bsCollapse = new bootstrap.Collapse('#collapseExample', {
toggle: false
})
bsCollapse.toggle()
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/519669.html