问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
CC
    21
    新手上路，请多包涵

    使用 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>

    如何解决这个问题？

    前端javascriptbootstrap
    阅读 1.1k
    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 个回答
    得票最新
    头像
    CC
      21
      新手上路，请多包涵

      文件引用问题。

      <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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题