Django项目HTML模板中Bootstrap下拉列表点击无响应

核心问题 #

你的代码存在两处直接导致下拉组件失效的错误：

1. 属性写法与Bootstrap版本不匹配：你代码中使用的data-toggle、data-target是Bootstrap 4的组件属性写法，如果你引入的是Bootstrap 5版本，所有组件交互属性都需要加bs-前缀，即改为data-bs-toggle、data-bs-target，否则JS无法绑定触发事件。
2. 重复加载Bootstrap JS资源：你同时引入了bootstrap.bundle.js、bootstrap.bundle.min.js、bootstrap.min.js三份Bootstrap脚本，重复执行会导致事件绑定冲突，直接让所有交互组件失效。

补充：bootstrap.bundle.min.js已经内置了下拉组件必需的Popper定位库，不需要额外引入其他Bootstrap核心JS文件。

另外你的下拉组件父元素缺少必填的dropdown类，右对齐类dropdown-menu-right在Bootstrap 5中已经改名为dropdown-menu-end，也会影响样式和功能。

修复后完整代码 #

{% load static %}
<!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">
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
    <title> {% block title %}{% endblock %} </title>
</head>
<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="{% url 'home' %}">Home</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbarCollapse" aria-controls="navbarCollapse"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            {% if user.is_authenticated %}
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="userMenu"
                        data-bs-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        {{ user.username }}
                        </a>
                        <div class="dropdown-menu dropdown-menu-end"
                            aria-labelledby="userMenu">
                            <a class="dropdown-item"
                            href="{% url 'upload'%}">Upload</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{% url 'logout' %}">
                            Log Out</a>
                        </div>
                    </li>
                </ul>
            {% else %}
                    <form class="form-inline ms-auto">
                    <a href="{% url 'login' %}" class="btn btn-outline-secondary">
                    Log In</a>
                    <a href="{% url 'signup' %}" class="btn btn-primary ms-2">
                    Sign up</a>
                    </form>
            {% endif %}
        </div>
    </nav>
    <div class="container">
        {% block content %}
        {% endblock content %}
    </div>
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>

兼容说明 #

如果你实际使用的是Bootstrap 4版本，不需要修改data-*属性，只需要：

• 删除重复引入的JS文件，仅保留一份bootstrap.min.js
• 在Bootstrap JS之前引入Popper.js
• 下拉菜单右对齐继续使用dropdown-menu-right类即可
• 给下拉组件的父li标签加上dropdown类

内容的提问来源于stack exchange，提问作者عبدالله اسامه