我来帮你搞定这个功能！结合你现有的代码，只需要三步就能实现：

1. 在页面添加切换按钮 #

首先在你的客户列表上方放一个按钮，用jQuery Mobile的样式让它更贴合页面风格：

<!-- 放在列表所在的content区域内，列表之前 -->
<a href="#" id="toggleAll" class="ui-btn ui-corner-all ui-btn-inline">全部展开</a>

2. 确保列表分组是可折叠状态（如果还没实现的话） #

如果你的代码还没把自动生成的list-divider转换成可折叠组件，需要先加上这段逻辑（和你原有的pageinit事件代码放在一起）：

$(document).on("pageinit", "#page-wrapper", function() {
  // 原有的listview初始化代码
  $("#com-status-value").listview({
    autodividers: true,
    autodividersSelector: function(li) {
      // 这里替换成你获取状态的逻辑，比如从data属性取
      var status = li.data("status");
      return status;
    }
  }).listview("refresh");

  // 新增：将list-divider转换为可折叠分组
  $("#com-status-value li[data-role='list-divider']").each(function() {
    var divider = $(this);
    // 获取当前分组下的所有客户列表项
    var groupItems = divider.nextUntil("[data-role='list-divider']");
    // 创建可折叠容器
    var collapsible = $("<div data-role='collapsible'>").append(
      $("<h3>").text(divider.text()), // 用divider文本作为折叠标题
      $("<ul data-role='listview'>").append(groupItems) // 把列表项放到折叠内容里
    );
    // 替换原来的divider为可折叠容器
    divider.replaceWith(collapsible);
  });

  // 初始化所有可折叠组件，默认折叠
  $("[data-role='collapsible']").collapsible({ collapsed: true });
});

3. 实现「全部展开/折叠」的核心逻辑 #

在同一个pageinit事件里，添加按钮的点击监听，切换所有可折叠分组的状态：

// 继续在pageinit事件内添加
var toggleBtn = $("#toggleAll");
toggleBtn.on("click", function(e) {
  e.preventDefault(); // 阻止默认跳转行为

  // 判断当前要执行的操作：根据按钮文本判断
  var shouldCollapse = toggleBtn.text() === "全部折叠";
  
  // 遍历所有可折叠分组，执行对应操作
  $(".ui-collapsible").each(function() {
    if (shouldCollapse) {
      $(this).collapsible("collapse"); // 折叠
    } else {
      $(this).collapsible("expand"); // 展开
    }
  });

  // 更新按钮文本，切换状态提示
  toggleBtn.text(shouldCollapse ? "全部展开" : "全部折叠");
});

关键说明 #

• 我们通过$(".ui-collapsible")选中所有可折叠分组，调用jQuery Mobile内置的collapsible("collapse")和collapsible("expand")方法来控制状态
• 按钮文本会随着操作切换，给用户清晰的反馈
• 如果你的ColdFusion代码是动态生成列表项，只要确保每个列表项带有状态标识（比如data-status属性），autodividersSelector就能正确生成分组标题

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