如何在Django中实现Bootstrap Accordion表单提交后停留在指定项？

问题原因 #

直接在URL后追加#collapseThree无效，是因为Bootstrap Accordion初始化时默认会展开第一个带show类的折叠项，页面加载时的锚点不会自动触发对应项的展开逻辑。

解决方案 #

1. 后端重定向时携带锚点 #

处理表单的视图函数中，提交成功后重定向到目标页面并追加锚点，确保刷新后的URL包含#collapseThree。

示例代码：

from django.shortcuts import redirect, reverse
from .forms import YourForm

def form_submit_view(request):
    success_message = ""
    if request.method == "POST":
        form = YourForm(request.POST)
        if form.is_valid():
            form.save()
            success_message = "提交成功！"
            # 重定向到页面视图并追加锚点
            return redirect(f"{reverse('your_page_view')}#collapseThree")
    else:
        form = YourForm()
    # 如果表单验证失败，直接渲染页面并携带错误信息，同时确保URL锚点存在
    return render(request, "your_page.html", {
        "form": form,
        "success_message": success_message
    })

2. 前端JS检测锚点并展开对应项 #

页面加载完成后，通过JS检测URL中的锚点，强制展开对应的Accordion项，并修正按钮的状态样式。

在页面的<script>标签中添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
    const targetHash = '#collapseThree';
    if (window.location.hash === targetHash) {
        // 获取目标折叠元素
        const collapseEl = document.querySelector(targetHash);
        if (collapseEl) {
            // 初始化并展开折叠项
            const collapse = new bootstrap.Collapse(collapseEl, { toggle: true });
            // 修正对应按钮的状态
            const toggleBtn = collapseEl.previousElementSibling.querySelector('.accordion-button');
            if (toggleBtn) {
                toggleBtn.classList.remove('collapsed');
                toggleBtn.setAttribute('aria-expanded', 'true');
            }
            // 可选：滚动到折叠项位置
            collapseEl.scrollIntoView({ behavior: 'smooth' });
        }
    }
});

3. 确保Accordion结构正确 #

检查你的Bootstrap Accordion HTML结构，确保第三个折叠项的id与锚点一致，且data-bs-parent属性正确关联父容器：

<div class="accordion" id="accordionExample">
  <!-- 前两个折叠项 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" 
              data-bs-toggle="collapse" data-bs-target="#collapseThree" 
              aria-expanded="false" aria-controls="collapseThree">
        第三项（包含表单）
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" 
         aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <!-- 表单 -->
        <form method="post" action="{% url 'form_submit_view' %}">
          {% csrf_token %}
          {{ form.as_p }}
          <button type="submit" class="btn btn-primary">提交</button>
        </form>
        <!-- 反馈信息 -->
        {% if success_message %}
          <div class="alert alert-success mt-3">{{ success_message }}</div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者A. Jabbitt