HTML-为什么下拉菜单不起作用？当我单击按钮下拉菜单时，什么也不会发生-堆栈溢出

顺晟科技

2022-10-19 11:33:26

106

我对编码是新手，我遇到了一个下拉按钮的问题。当我点击它时，什么也没发生。我不知道我做错了什么；以下是我的代码（我在Chrome和FireFox的最新版本中尝试了此代码）:

    <html>
    <head>
    <meta name="veiwport" content="width=device-width" initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"   rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"
    </head>

    <header>

    </header>

    <body>

    <div class="dropdown">

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
    <li><a href="#">Home></li>
    <li><a href="#">Contact<li>
    </ul>
    </div>

    </body>

    <footer>

    </footer>

    </html>

顺晟科技：

您没有包含Bootstrap需要的JS文件以使下拉菜单工作。按照Kiran的回答，您可以分别包含popper和Bootstrap,或者只包含将它们合并为一个的bundle。在结束前粘贴以下脚本。

引导包js:

来源:bootstrap intro

根据官方文件

下拉菜单建立在第三方库Popper上，该库提供动态定位和视口检测。确保在bootstrap的JavaScript之前包含popper.min.js，或者使用bootstrap.bundle.min.js/bootstrap.bundle.js，其中包含popper。Popper不用于定位navbars中的下拉列表，因为不需要动态定位。

下面是指向文档的链接

您需要在正文末尾的bootstrap.min.js之前包含popper，这样就可以工作了。

https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js

上一篇：PHP-是否有一种方法可以使带有cs 下一篇：HTML-我试图使按钮转到另一页，但

网站建设

Html

HTML-为什么下拉菜单不起作用？当我单击按钮下拉菜单时，什么也不会发生-堆栈溢出