Bootstrap手风琴抛出TypeError：非法调用

html5 • • 问答

我有一个这样写的手风琴

<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    </head>
    <body>
    <div>
        <div>
            <h2>
                <button type="button" aria-expanded="false" aria-controls="editTournamentAccordion">
                    Card title
                </button>
            </h2>
            <div aria-labelledby="editTournamentAccordionHeading">
                <div>
                    <iframe src="www.example.com"></iframe>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

回答

TLDR：属性中#缺少A。data-bs-parent

根据Bootstrap 文档，data-bs-parent接受一个

选择器 | jQuery 对象 | DOM元素

当您传入data-bs-parent="id"属性时，它是纯文本，因此不属于任何类别。结果你得到Uncaught TypeError: Illegal invocation

工作示例：

<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    </head>
    <body>
    <div>
        <div>
            <h2>
                <button type="button" aria-expanded="false" aria-controls="editTournamentAccordion">
                    Card title
                </button>
            </h2>
            <div aria-labelledby="editTournamentAccordionHeading">
                <div>
                  Card Body
<!--                    <iframe src="www.example.com"></iframe>-->
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    </body>
</html>

以上是Bootstrap手风琴抛出TypeError：非法调用的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容