只有所有其他链接在 Bootstrap 5 弹出窗口中都正常工作

编程问答 2022-05-22

问题描述

大家好，这是我在这里的第一个问题，我已经对这个问题进行了一些彻底的研究。老实说，在这一点上我觉得有点愚蠢。那么问题来了：

我在一个项目中使用 Bootstrap 5，并有一个弹出框来显示社交媒体的共享链接。几乎所有东西都像一种魅力，但是当我想在一个弹出窗口中显示多个链接 () 时，只有一个可以正常工作。如果我添加第三个链接，则第一个和第三个链接将起作用，但第二个链接不起作用。如果我添加更多链接，则只有其他链接有效。

这就是它变得非常奇怪的地方：如果我关闭弹出窗口并重新打开它，工作链接已经切换！所以这次第一个和第三个链接不起作用，但第二个链接起作用。而且这种行为是可以重现的。因此，如果我在下一次打开时再次关闭弹出窗口，则工作的链接会切换回先前的状态。它只是切换它。在 chrome webdevtools 中，href 只是从代码中消失并再次出现在控制台区域中，没有任何错误。

也许你们中的一个可以帮我解决这个问题。这是用于弹出框的代码：

    <button class="btn btn-icon sug_share" type="button" value="social_share" active data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="'.$popUpContent.'" role="button">
    <i class="bi bi-share-fill"></i> Teilen</button>

您可能已经注意到那里的 PHP 变量填充了 data-bs-content 属性。它包含以下内容：

    <span>
    <a href='https://www.facebook.com/sharer.PHP?u=pathtopage' target='_blank'><i class='bi bi-facebook'></i> Facebook</a>
    </span> | 
    <span>
    <a href='https://twitter.com/intent/tweet?url=pathtopage' target='_blank'><i class='bi bi-twitter'></i> Twitter</a>
    </span> | 
    <span>
    <a href='https://www.linkedin.com/shareArticle?mini=true&url=pathtopage' target='_blank'><i class='bi bi-linkedin'></i> LinkedIn</a>
    </span>

我通过使用他们网站中提供的标准 JS 方法告诉引导程序打开哪些弹出窗口：

    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
    })

我在 JS 方面远非完美，尤其是在将变量从 PHP 传递到 JS 时，这就是我选择这种创建弹出框的方法的原因。但我现在真的很穷。希望你们中的一些人可以帮助我。

先谢谢你。干杯！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-5bootstrap-modalbootstrap-popoverpopoverpopovertwitter-bootstrap