如何通过jQuery一次性展开Kendo弹窗内的所有Bootstrap折叠面板

我明白你的困扰——Bootstrap的折叠面板（Accordion）默认是互斥展开的，再加上在Kendo自定义编辑模板弹窗里的特殊场景，之前的方法确实会失效。下面我来一步步帮你搞定这个问题：

问题原因 #

Bootstrap的折叠组件在设置了data-parent属性后，会自动启用互斥展开机制：当你展开一个面板时，同组内的其他面板会自动收起。这就是为什么你之前的方法只能切换前两个面板，而无法全部展开的核心原因。

解决方案 #

要一次性展开所有面板，我们需要先打破这个互斥限制，再执行展开操作。具体步骤如下：

1. 移除data-parent属性：解除折叠面板之间的互斥关联
2. 调用展开方法：让所有面板同时展开
3. 可选：恢复互斥功能：如果之后还需要保持默认的互斥行为，可以再把data-parent加回去

具体代码实现 #

首先在你的弹窗里添加一个“展开全部”按钮：

<button id="expand-all-btn" class="btn btn-primary">展开所有面板</button>

然后编写jQuery点击事件处理逻辑：

// 绑定按钮点击事件
$('#expand-all-btn').on('click', function() {
  // 1. 移除所有折叠面板的data-parent属性，解除互斥限制
  $('#accordion-demo .panel-collapse').removeAttr('data-parent');
  
  // 2. 展开所有折叠面板
  $('#accordion-demo .panel-collapse').collapse('show');
  
  // 可选：如果之后需要恢复互斥功能，取消下面这行注释
  // $('#accordion-demo .panel-collapse').attr('data-parent', '#accordion-demo');
});

针对Kendo弹窗的注意事项 #

因为你的折叠面板是在Kendo自定义编辑模板弹窗里，要确保代码在弹窗完全渲染完成后执行。可以把这段JS代码放在Kendo Grid的edit事件里：

$("#your-grid-id").kendoGrid({
  // 其他配置项...
  edit: function(e) {
    // 弹窗渲染完成后绑定按钮事件
    $('#expand-all-btn').on('click', function() {
      $('#accordion-demo .panel-collapse').removeAttr('data-parent');
      $('#accordion-demo .panel-collapse').collapse('show');
    });
  }
});

这样就能确保按钮点击时，折叠面板已经存在于DOM中，代码可以正常执行。

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