嵌套引導程序 5 手風琴不會折疊打開的面板

Question

我有一些頁面內容被嵌套的引導手風琴打破了。 我正在使用引導程序 5。

父手風琴在各大洲之間拆分，然后每個面板包含另一個在國家之間拆分的手風琴。

我的父手風琴按預期運行 - 選擇 1 個大洲將關閉之前選擇的大洲。 然而，我的嵌套手風琴並沒有像我期望的那樣關閉以前選擇的國家面板。

我相信我在所有情況下都適當地設置了 data-bs-parent 的值。 還有什么可能導致這個問題？

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.min.js" integrity="sha384-PsUw7Xwds7x08Ew3exXhqzbhuEYmA2xnwc8BuD6SEr+UmEHlX8/MCltYEodzWA4u" crossorigin="anonymous"></script> <div class="accordion" id="port-accordion"> <div class="accordion-item"> <h2 class="accordion-header" id="accordion-header-one"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="false" aria-controls="collapse-one"> North America </button> </h2> <div id="collapse-one" class="accordion-collapse collapse" aria-labelledby="accordion-header-one" data-bs-parent="#port-accordion" style=""> <div class="accordion-body" data-hotspot="1"> <div class="accordion" id="country-accordion-one"> <div class="accordion-item" id="accordion-item-canada"> <h2 class="accordion-header" id="accordion-header-canada"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-canada" aria-expanded="false" aria-controls="collapse-canada">Canada</button> </h2> <div id="collapse-canada" class="accordion-collapse collapse" aria-labelledby="accordion-header-canada" data-bs-parent="#country-accordion-one" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> <div class="accordion-item" id="accordion-item-mexico"> <h2 class="accordion-header" id="accordion-header-mexico"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-mexico" aria-expanded="false" aria-controls="collapse-mexico">Mexico</button> </h2> <div id="collapse-mexico" class="accordion-collapse collapse" aria-labelledby="accordion-header-mexico" data-bs-parent="#country-accordion-one" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> <div class="accordion-item" id="accordion-item-united-states-of-america"> <h2 class="accordion-header" id="accordion-header-united-states-of-america"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-united-states-of-america" aria-expanded="false" aria-controls="collapse-united-states-of-america">United States Of America</button> </h2> <div id="collapse-united-states-of-america" class="accordion-collapse collapse" aria-labelledby="accordion-header-united-states-of-america" data-bs-parent="#country-accordion-one" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> </div> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="accordion-header-two"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-two" aria-expanded="true" aria-controls="collapse-two"> South America </button> </h2> <div id="collapse-two" class="accordion-collapse collapse show" aria-labelledby="accordion-header-two" data-bs-parent="#port-accordion" style=""> <div class="accordion-body" data-hotspot="2"> <div class="accordion" id="country-accordion-two"> <div class="accordion-item" id="accordion-item-aruba"> <h2 class="accordion-header" id="accordion-header-aruba"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-aruba" aria-expanded="false" aria-controls="collapse-aruba">Aruba</button> </h2> <div id="collapse-aruba" class="accordion-collapse collapse" aria-labelledby="accordion-header-aruba" data-bs-parent="#country-accordion-two" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> <div class="accordion-item" id="accordion-item-curacao"> <h2 class="accordion-header" id="accordion-header-curacao"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-curacao" aria-expanded="true" aria-controls="collapse-curacao">Curacao</button> </h2> <div id="collapse-curacao" class="accordion-collapse collapse show" aria-labelledby="accordion-header-curacao" data-bs-parent="#country-accordion-two" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> <div class="accordion-item" id="accordion-item-trinidad-and-tobago"> <h2 class="accordion-header" id="accordion-header-trinidad-and-tobago"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-trinidad-and-tobago" aria-expanded="true" aria-controls="collapse-trinidad-and-tobago">Trinidad and Tobago</button> </h2> <div id="collapse-trinidad-and-tobago" class="accordion-collapse collapse show" aria-labelledby="accordion-header-trinidad-and-tobago" data-bs-parent="#country-accordion-two" style=""> <div class="accordion-body"> <p>Accordion content</p> </div> </div> </div> </div> </div> </div> </div> </div>

Answer 1

您需要將以下內容添加到 angular.json 文件中：

“腳本”：[“node_modules/bootstrap/dist/js/bootstrap.min.js”]