如何修改Bootstrap手风琴搜索栏代码添加全部展开/折叠按钮？

没问题，我来帮你给这个带搜索功能的Bootstrap手风琴加上「全部展开」和「全部折叠」按钮。下面是具体的修改步骤，完全兼容你现有的搜索功能：

1. 添加按钮的HTML结构 #

首先，在你的搜索栏下方（或者手风琴的任意合适位置）添加两个按钮，用Bootstrap的样式保持风格统一：

<!-- 放在搜索栏与手风琴之间的位置 -->
<div class="mb-3">
  <button id="expand-all" class="btn btn-primary me-2">全部展开</button>
  <button id="collapse-all" class="btn btn-secondary">全部折叠</button>
</div>

2. 修改JavaScript代码 #

接下来，在你现有的JS代码末尾，添加按钮的点击事件处理逻辑，直接利用Bootstrap自带的collapse组件方法实现功能：

(function(){
  var searchTerm, panelContainerId;
  
  // 保留你原有的大小写不敏感搜索逻辑
  $.expr[':'].containsCaseInsensitive = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
  };

  $('#accordion_search_bar').on('change keyup paste click', function () {
    searchTerm = $(this).val();
    $('#accordion > .panel').each(function () {
      panelContainerId = '#' + $(this).attr('id');
      $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
      $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
    });
  });

  // 新增：全部展开按钮逻辑
  $('#expand-all').on('click', function() {
    // 调用Bootstrap内置方法展开所有面板
    $('#accordion .panel-collapse').collapse('show');
  });

  // 新增：全部折叠按钮逻辑
  $('#collapse-all').on('click', function() {
    // 调用Bootstrap内置方法折叠所有面板
    $('#accordion .panel-collapse').collapse('hide');
  });
})();

功能说明 #

• 这两个按钮完全兼容现有搜索功能：当你用搜索过滤出部分面板后，点击「全部展开」只会展开当前显示的面板，折叠操作同理。
• 我们直接使用Bootstrap手风琴组件自带的方法，不需要自己写复杂的DOM操作，既简洁又不容易出错。
• 如果你的Bootstrap版本是4+（原Codepen用的是3.x），只需要把代码里的.panel-collapse改成.collapse即可适配新版本结构。

内容的提问来源于stack exchange，提问作者Blue Da Noob