如何用jQuery实现嵌套Div展开折叠？二级展开功能失效排查

我来帮你捋一捋这个问题，动态生成的嵌套元素出现点击无响应的情况，大概率是事件绑定或者选择器的坑，咱们一步步排查：

1. 事件绑定时机不对（最常见原因） #

你之前的一级Div是静态渲染的，直接用$('.toggle-btn').click()就能绑定事件，但Razor循环生成的嵌套Div是动态添加到DOM的——当你执行绑定代码时，这些元素还没被渲染出来，所以事件根本没绑定到它们身上。

解决办法是用事件委托，把事件绑定到已经存在的父元素（或者document）上，让它监听动态元素的点击：

// 推荐绑定到离目标元素最近的静态父容器，比document性能更好
$('.audit-container').on('click', '.toggle-audit-btn', function() {
    // 从按钮的data属性取AuditID，比拼接ID更可靠
    const auditId = $(this).data('auditId');
    const targetDiv = $(`#audit-${auditId}`);
    
    // 先在控制台确认是否找到目标元素，方便排查
    console.log('目标元素:', targetDiv);
    
    // 切换显示隐藏
    targetDiv.toggle();
});

2. 选择器或ID重复问题 #

虽然你说能获取目标ID，但要检查两个关键点：

• Razor生成的ID是不是唯一的？比如循环嵌套时，有没有不小心用了父级的AuditID？打开浏览器F12查看HTML源码，搜索生成的ID，确保每个嵌套Div的ID都是独一无二的。
• 选择器有没有精准定位？比如不要用全局的.collapse-div，而是通过按钮的上下文（比如兄弟元素、子元素）来查找，避免影响其他层级的Div：

  // 比如按钮是嵌套Div的兄弟元素，直接找相邻的目标
  $(this).next('.audit-details').toggle();
  

3. CSS样式冲突 #

有时候toggle()失效是因为元素的display属性被其他CSS覆盖了（比如加了!important）。这种情况不如用自定义类来控制显示隐藏，更稳定：

/* 定义折叠状态的样式 */
.collapsed {
    display: none !important;
}

然后JS里切换类：

targetDiv.toggleClass('collapsed');

同时在Razor生成时设置初始状态：

<div id="audit-@item.AuditID" class="audit-details @(item.IsCollapsed ? "collapsed" : "")">
    <!-- 嵌套内容 -->
</div>

4. 控制台排查技巧 #

打开浏览器开发者工具（F12），切换到Console标签：

• 点击按钮时，看有没有报错信息（比如$ is not defined说明jQuery没加载，或者选择器返回空）。
• 打印目标元素，确认targetDiv.length是不是1（如果是0说明没找到元素，1是正常，大于1说明ID重复）。

示例完整代码 #

Razor视图（动态生成嵌套Div） #

<!-- 静态父容器，用于事件委托 -->
<div class="audit-container">
    @foreach (var audit in Model.AuditList)
    {
        <div class="audit-item">
            <!-- 展开/折叠按钮，用data属性存AuditID -->
            <button class="toggle-audit-btn" data-audit-id="@audit.AuditID">
                @(audit.IsExpanded ? "折叠" : "展开") @audit.AuditName
            </button>
            <!-- 嵌套的详情Div -->
            <div id="audit-@audit.AuditID" class="audit-details @(audit.IsExpanded ? "" : "collapsed")">
                <!-- 子层级的嵌套内容 -->
                @foreach (var subAudit in audit.SubAudits)
                {
                    <div class="sub-audit-item">
                        <button class="toggle-audit-btn" data-audit-id="@subAudit.AuditID">
                            @(subAudit.IsExpanded ? "折叠" : "展开") @subAudit.AuditName
                        </button>
                        <div id="audit-@subAudit.AuditID" class="audit-details @(subAudit.IsExpanded ? "" : "collapsed")">
                            <!-- 子项详情内容 -->
                            <p>@subAudit.Description</p>
                        </div>
                    </div>
                }
            </div>
        </div>
    }
</div>

jQuery代码 #

$(function() {
    // 事件委托绑定到静态父容器
    $('.audit-container').on('click', '.toggle-audit-btn', function() {
        const $btn = $(this);
        const auditId = $btn.data('audit-id');
        const $targetDiv = $(`#audit-${auditId}`);
        
        // 切换按钮文字
        $btn.text($btn.text() === '展开' ? '折叠' : '展开');
        // 切换Div显示状态
        $targetDiv.toggleClass('collapsed');
    });
});

CSS样式 #

.audit-details {
    margin-left: 20px;
    margin-top: 10px;
}
.collapsed {
    display: none;
}
.toggle-audit-btn {
    cursor: pointer;
    padding: 4px 8px;
    border: none;
    background: #f0f0f0;
    border-radius: 4px;
}

按照这个思路排查，应该能解决你的问题。

内容的提问来源于stack exchange，提问作者Sam