Bootstrap 5手风琴：标题中的可点击元素答案

【问题标题】：Boostrap 5 accordion : clickable element in headerBootstrap 5手风琴：标题中的可点击元素
【发布时间】：2022-01-11 10:20:40
【问题描述】：

我正在尝试在我的 Bootstrap 5 手风琴中添加一个可点击的帮助区域，如您在此屏幕截图中所见：

我希望用户能够单击问号，这将打开带有一些帮助文本的 Bootstrap 模式。

但是，这样做时，模态正在打开，但手风琴正在折叠（或在关闭时打开）。

我使用以下 JavaScript 代码来实现这个目标：

const categHelpBtns = document.querySelectorAll('.categ_help');
for (let i = 0; i < categHelpBtns.length; i++) {
    const btn = categHelpBtns[i];
    if(btn) {
        btn.addEventListener("click", function(e) {
            e.stopPropagation();
            const modal =  document.getElementById(btn.dataset.modalId)
            if(modal) {
                new bootstrap.Modal(modal).show();
            }
        });
    }
}

点击帮助图标时如何防止手风琴折叠/打开的任何线索？

       const categHelpBtns = document.querySelectorAll('.categ_help');
        for (let i = 0; i < categHelpBtns.length; i++) {
            const btn = categHelpBtns[i];
            if(btn) {
                btn.addEventListener("click", function(e) {
                    e.stopPropagation();
                    const modal =  document.getElementById(btn.dataset.modalId)
                    if(modal) {
                        new bootstrap.Modal(modal).show();
                    }
                });
            }
        }

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
        </head>
        <body>
            <div class="accordion">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button onglet-header" type="button" data-bs-toggle="collapse" data-bs-target="#nom_pays" aria-expanded="true" aria-controls="nom_pays">
                            Accordion &nbsp; <i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>
                        </button>
                    </h2>
                    <div id="nom_pays" class="accordion-collapse collapse show" aria-labelledby="nom_pays_header" data-bs-parent="#fiche_bois">
                        <div class="accordion-body">
                            Accordion Body
                            </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Data</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"/>
                        </div>
                        <div class="modal-body">
                        Modal body
                    </div>
                    </div>
                </div>
            </div>
        </body>
    </html>

【问题讨论】：

请提供Minimal Reproducible Example。
您可以在前面评论中提到的Code Snippet 中添加您的示例。
我已经更新了帖子
我没有找到解决方案，但我发现了一个类似的问题。这有帮助吗？ stackoverflow.com/q/67274281/14032355
确实如此，帮助按钮的位置相对而不是弹性和绝对（我放在行首）

标签： javascript twitter-bootstrap bootstrap-5

【解决方案1】：

您不必编写额外的 JavaScript 来触发模态。

您可以使用引导 html 属性轻松完成此操作。

为了触发你的模式，点击问号

替换：

<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>

与：

<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#modal"></i>

【讨论】：