如何在Swagger/Swashbuckle中添加展开/折叠全部文档的按钮？

解决思路：借助Swagger UI自带的客户端API，通过自定义脚本在页面添加按钮，绑定展开/折叠的触发逻辑，替代失效的URL参数方法。

具体实现（以ASP.NET Core为例，其他框架可参考调整） #

• 第一步：在SwaggerUI配置中注入自定义脚本
  在Startup.cs或Program.cs的Swagger配置代码里，添加InjectJavascript引入自定义脚本文件：

  app.UseSwaggerUI(options =>
  {
      options.SwaggerEndpoint("/swagger/v1/swagger.json", "API V1");
      options.DocExpansion(DocExpansion.List); // 设置初始展开/折叠状态
      // 注入自定义脚本，路径根据实际静态资源位置调整
      options.InjectJavascript("/swagger-ui/custom-scripts.js");
  });
  

• 第二步：编写自定义脚本文件
  在项目的静态资源目录（比如ASP.NET Core的wwwroot/swagger-ui）下创建custom-scripts.js，写入以下代码：

  // 等待Swagger UI完全加载
  window.addEventListener('load', () => {
      // 找到顶部导航栏，用来放置按钮
      const topbar = document.querySelector('.swagger-ui .topbar');
      if (!topbar) return;
  
      // 创建按钮容器，调整样式
      const btnContainer = document.createElement('div');
      btnContainer.style.marginLeft = '12px';
      btnContainer.style.display = 'inline-flex';
      btnContainer.style.gap = '8px';
  
      // 「展开所有」按钮
      const expandBtn = document.createElement('button');
      expandBtn.textContent = '展开所有';
      expandBtn.className = 'btn btn-primary';
      expandBtn.onclick = () => window.ui.expandAll();
  
      // 「折叠所有」按钮
      const collapseBtn = document.createElement('button');
      collapseBtn.textContent = '折叠所有';
      collapseBtn.className = 'btn btn-secondary';
      collapseBtn.onclick = () => window.ui.collapseAll();
  
      // 将按钮添加到页面
      btnContainer.appendChild(expandBtn);
      btnContainer.appendChild(collapseBtn);
      topbar.appendChild(btnContainer);
  });
  

原理说明 #

Swagger UI初始化完成后，会将实例挂载到全局的window.ui对象上，其中内置的expandAll()和collapseAll()方法可以直接控制所有API章节的展开/折叠状态，完全替代原URL参数的功能。

其他场景适配 #

如果是独立部署的Swagger UI（而非框架集成），直接在Swagger的HTML页面中添加上述脚本即可，无需后端配置。

内容的提问来源于stack exchange，提问作者Mo B.