bootstrap 5 手风琴：防止切换标题中的指定元素

Question

我有 bootstrap 5 手风琴
想要通过单击手风琴标题中的图标来显示要显示的弹出框
popover 正在工作，但手风琴也在切换。如果单击 popover-handler 元素，我想防止切换手风琴。
我的代码也在https://codepen.io/fakhre-alam/pen/zYERaqQ

<div class="accordion-item mb-3 border shadow-sm">
            <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                <button class="d-inine-block accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
                    Heading                                                                        
                    <i class="fa fa-info-circle ms-3 popover-handler no-collapsable" 
                        data-bs-trigger="click" 
                        data-html="true" 
                        data-bs-title="Title of POPOVER <i class='float-end btn-popover btn-close'></i>" 
                        data-bs-content="some text in popover<br />
                            some more text in popover<br />
                            even more text in popover<br />
                            last line of text in popover</b>">
                    </i>
                </button>
                
            </h2>
            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
                <div class="accordion-body p-0 px-2" >                     
                        accordion content<br>
                        accordion content<br>
                        accordion content<br>
                        accordion content<br>
                        accordion content<br> 
                </div><!--.accordion-body-->
            </div>
        </div>
    </div>


<script>
$(function(){ 
    $('.popover-handler').popover({  
            html: true, 
    }); 
    $('body').on('click', '.popover-handler',function (e) {
         e.stopPropagation();
    });
});
</script>

Answer 1

据我所知，.accordion-button 内的嵌套元素不允许记录内部元素的事件。我有一些建议给你：

建议 1： 将<i> 拆分为.accordion-button，然后用绝对定位实现视觉上相似的外观。试试这样：

<style>
    .accordion-header {
        position: relative;
    }
    .i-custom {
        position: absolute;
        right: 50px;
        z-index: 9999;
    }
    .tooltip-custom {
        position: absolute;
        top: 15px;
        right: 10px;
        z-index: 99999;
    }
</style>
<div class="accordion-item mb-3 border shadow-sm">
    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
        <div class="d-flex">
            <button class="d-inine-block accordion-button text-start"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#panelsStayOpen-collapseOne"
                    aria-expanded="true"
                    aria-controls="panelsStayOpen-collapseOne">
                <h5 class="content_title fw-bold w-100 text-left">Heading 1</h5>
            </button>
            <div class="d-flex align-items-start tooltip-custom">
                <i class="fa fa-info-circle ms-3 popover-handler no-collapsable i-custom"
                   data-bs-trigger="click"
                   data-html="true"
                   data-bs-title="Title of POPOVER <i class='float-end btn-popover btn-close'></i>"
                   data-bs-content="some text in popover<br />
                        some more text in popover<br />
                        even more text in popover<br />
                        last line of text in popover</b>">
                </i>
            </div>
        </div>
    </h2>
    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
         aria-labelledby="panelsStayOpen-headingOne">
        <div class="accordion-body p-0 px-2">
            accordion content<br>
        </div>
    </div>
</div>

建议2：将click改为hover事件

<div class="accordion-item mb-3 border shadow-sm">
    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
        <button class="d-inine-block accordion-button text-start"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#panelsStayOpen-collapseTwo"
                aria-expanded="true"
                aria-controls="panelsStayOpen-collapseTwo">
            Heading 2
            <i class="fa fa-info-circle ms-3 popover-handler no-collapsable i-hover"
               data-html="true"
               data-bs-title="Hover POPOVER <i class='float-end btn-popover btn-close'></i>"
               data-bs-content="some text in popover<br />
                        last line of text in popover</b>">
            </i>
        </button>
    </h2>
    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse show"
         aria-labelledby="panelsStayOpen-headingOne">
        <div class="accordion-body p-0 px-2">
            accordion content<br>
        </div>
    </div>
</div>

<script>
    $(function(){
        $('.i-hover').hover(function () {
            const popover = bootstrap.Popover.getInstance($(this))
            popover.toggle()
        })
    });
</script>

完整代码here