使用 Bootstrap 5 创建下拉菜单后无法收回?

新手上路,请多包涵

使用 Bootstrap 5 创建下拉菜单后,点击可以展开,但是再次点击无法收回。

这是我的代码:

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.2/css/bootstrap.min.css' %}">
</head>
<body>
    <div class="row" style="width: 100%">
        <div class="col-3">
            <div class="card">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#dropdownContent1" aria-expanded="false" aria-controls="dropdownContent">
                            1 Python 解释器
                        </button>
                        <div class="collapse-show" id="dropdownContent1">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item"><a class="link-secondary link-underline-opacity-0" href="#">1.1 调用解释器</a></li>
                                <li class="list-group-item"><a class="link-secondary link-underline-opacity-0" href="#">1.2 解释器的运行环境</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#dropdownContent2" aria-expanded="false" aria-controls="dropdownContent">
                            2 Python 速览
                        </button>
                        <div class="collapse" id="dropdownContent2">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item"><a class="link-secondary link-underline-opacity-0" href="#">2.1 Python 用作计算器</a></li>
                                <li class="list-group-item"><a class="link-secondary link-underline-opacity-0" href="#">2.2 走向编程的第一步</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-5.3.2/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-5.3.2/js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>

如何解决这个问题?

阅读 361
avatarAI BotBETA

你的代码看起来是正确的,应该能够正常工作。Bootstrap 5 的下拉菜单默认就是可以展开和收起的。如果你遇到无法收回的问题,可能是由于某些原因导致 JavaScript 没有正确执行。

以下是一些可能的解决方案:

  1. 确保你的 jQuery 和 Bootstrap JS 文件是最新版本的。旧版本可能会与新版本的 Bootstrap 5 不兼容。你可以通过 <script> 标签检查文件的版本,确保它们是最新的。
  2. 检查是否有其他 JavaScript 错误。在浏览器的开发者工具中查看控制台,看是否有任何 JavaScript 错误。这些错误可能会阻止 Bootstrap 的下拉菜单功能正常工作。
  3. 确保你的 HTML 结构是正确的。Bootstrap 的下拉菜单需要正确的 HTML 结构才能正常工作。你的代码看起来是正确的,但如果有任何小的 HTML 错误,比如标签没有正确关闭,也可能导致问题。
  4. 尝试添加 data-bs-toggle="collapse"data-bs-target 属性到触发下拉菜单的按钮上。这样可以直接控制哪个下拉菜单应该被展开或收起。你的代码中已经有了这些属性,所以这可能不是问题的原因。
  5. 尝试使用 Bootstrap 的 collapse 方法手动控制下拉菜单的展开和收起。例如,你可以使用 $('#dropdownContent1').collapse('hide') 来手动收起下拉菜单。

如果以上方法都不能解决问题,你可能需要提供更多的信息,比如你的浏览器版本、jQuery 和 Bootstrap 的版本等,以便更好地诊断问题。

1 个回答
新手上路,请多包涵

文件引用问题。

<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-5.3.2/js/bootstrap.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-5.3.2/js/bootstrap.bundle.min.js' %}"></script>

同时引用bootstrap.min.js与bootstrap.bundle.min.js,产生冲突,删除bootstrap.min.js,问题解决。

另:bootstrap5不依赖jQuery,可删除

<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
推荐问题
宣传栏