【问题标题】:Bootstrap v5 dropdown is not working (no drop down menu) [duplicate]Bootstrap v5 下拉菜单不起作用(没有下拉菜单)[重复]
【发布时间】:2022-02-02 00:52:11
【问题描述】:

我正在尝试使用 Bootstrap 创建一个下拉菜单,但它不起作用(单击按钮时没有下拉菜单)。但是,我可以完美地使用该框架来进行样式设置。 Bootstrap js 链接也在 body 标签的底部。我已经尝试了很多事情,比如将 CDN 链接更改为另一个,或者尝试其他类型的下拉菜单,但仍然没有任何效果。我还尝试了与我的问题相关的其他 StackOverflow 线程,但同样没有任何效果。

这是 HTML(我已经为您简化了)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body style="position: relative;">
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
</body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
    crossorigin="anonymous"></script>

</html>

谢谢!

【问题讨论】:

    标签: html css bootstrap-5


    【解决方案1】:

    您需要应用 2 个更改:

    data-toggle 已重命名为 data-bs-toggle

    其次,给popper.js添加依赖:

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    

    或者使用根据https://getbootstrap.com/docs/5.0/getting-started/download/编译了popper的bootstrap版本

    【讨论】:

    • 谢谢!我想知道为什么他们没有在 Bootstrap 文档的顶部提到它?添加 popper 依赖项并更改数据切换..
    猜你喜欢
    • 2013-01-21
    • 2018-08-30
    • 2012-10-31
    • 2021-12-19
    • 2012-03-20
    • 1970-01-01
    • 1970-01-01
    • 2020-07-13
    • 2018-02-12
    相关资源
    最近更新 更多