Javascript 引导数据切换折叠不工作_Javascript_Html_Bootstrap 4

Javascript 引导数据切换折叠不工作

javascript html bootstrap-4

Javascript 引导数据切换折叠不工作,javascript,html,bootstrap-4,Javascript,Html,Bootstrap 4,我的这个html测试用例几乎完全取自bootstrap的示例，但当我按下任何按钮时，都不会显示div Bootstrap 4文件是本地托管的，因为它是本地应用程序而不是web应用程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial

我的这个html测试用例几乎完全取自bootstrap的示例，但当我按下任何按钮时，都不会显示div

Bootstrap 4文件是本地托管的，因为它是本地应用程序而不是web应用程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
        <script src="js/bootstrap.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/popper.js"></script>
    </head>
    <body>
        <p>
            <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
            </a>
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-target
            </button>
        </p>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
        </div>
    </body>
</html>



带数据目标的按钮

动物保护协会的陈词滥调，埃尼姆·埃乌斯莫德的高寿命accusamus terry richardson广告鱿鱼。Nihil anim keffiyeh helvetica，工艺啤酒工人wes anderson cred nesciunt sapiente ea proident。

错误在哪里？

您必须在

jquery.js
之后包含bootstrap.js
您必须在jquery.js
之后包含bootstrap.js
您可能应该将脚本移出页眉，并移到正文标记的底部。您可能应该将脚本移出页眉并移动到页眉底部正好在body标签内