Bootstrap 5 Collapse加载AJAX内容后无法关闭的解决方法

问题概述 #

使用Bootstrap 5的Collapse组件实现可折叠表单，初始状态下折叠功能正常，但通过AJAX将图片内容动态加载到折叠面板内的#product_image_content容器后，折叠按钮仅能打开面板，无法触发关闭操作。

相关代码 #

HTML 主页面 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <h1 class="text-center">Add Product</h1>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#create-product-collapse" aria-expanded="false" aria-controls="create-product-collapse">
        Button with data-bs-target
    </button>
    <div class="container d-flex justify-content-center align-items-center">
        <div class="collapse" id="create-product-collapse">
            <h2 class="text-center">Add Product</h2>
            <form action="/create_product" method="POST">
                <button type="submit" class="btn btn-primary">Kaydet</button>
            </form>
            <div id="product_image_content"></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
                url: '/list_image',
                type: 'GET',
                success: function(response) {
                    $('#product_image_content').html(response);
                },
                error: function(xhr) {
                    console.error('Error fetching images:', xhr);
                }
            });
        });
    </script>
</body>
</html>

Flask 路由 #

@app.route('/list_image', methods=['GET'])
@login_required
def list_image():
    images = Image.objects(userId=session['username'])
    rendered_html = render_template('image_items.html', images=images)
    return rendered_html

Jinja2 模板 (image_items.html) #

{% for image in images %}
<div class="image-item">
    <img src="{{ image.url }}" alt="{{ image.description }}" class="img-fluid">
</div>
{% endfor %}

问题原因 #

Bootstrap 5的Collapse组件在展开面板时，会计算并缓存目标元素的高度值。当通过AJAX动态加载内容后，面板内元素的实际高度发生变化，但Collapse内部的高度缓存未更新，导致点击关闭按钮时，组件无法识别高度变化，无法触发折叠逻辑。

解决方案 #

方案1：重新初始化Collapse实例 #

在AJAX加载完成后，获取或创建Collapse实例并刷新状态，让组件重新计算高度：

$(document).ready(function() {
    $.ajax({
        url: '/list_image',
        type: 'GET',
        success: function(response) {
            $('#product_image_content').html(response);
            
            // 处理Collapse组件
            const collapseElement = document.getElementById('create-product-collapse');
            const collapseInstance = bootstrap.Collapse.getOrCreateInstance(collapseElement);
            
            // 如果面板处于展开状态，重新调用show方法刷新高度计算
            if (collapseElement.classList.contains('show')) {
                collapseInstance.show();
            }
        },
        error: function(xhr) {
            console.error('Error fetching images:', xhr);
        }
    });
});

方案2：销毁并重建Collapse实例 #

如果方案1无效，可以销毁原有实例后重新创建，确保组件状态完全重置：

success: function(response) {
    $('#product_image_content').html(response);
    
    const collapseEl = document.getElementById('create-product-collapse');
    // 销毁现有实例
    const existingInstance = bootstrap.Collapse.getInstance(collapseEl);
    if (existingInstance) {
        existingInstance.dispose();
    }
    // 创建新实例，保持当前状态不自动切换
    new bootstrap.Collapse(collapseEl, { toggle: false });
}

方案3：触发窗口resize事件 #

通过触发resize事件，让Bootstrap自动重新计算所有组件的尺寸：

success: function(response) {
    $('#product_image_content').html(response);
    window.dispatchEvent(new Event('resize'));
}

验证方法 #

1. 执行上述修改后，重新加载页面；
2. 点击折叠按钮打开面板，确认AJAX内容加载完成；
3. 再次点击折叠按钮，验证面板是否能正常关闭。

内容的提问来源于stack exchange，提问作者Fuat Büyük