如何在单个Razor页面实现多独立jQuery手风琴批量展开/折叠？

我帮你分析下，你遇到的这个“点击展开按钮后，原本关闭的手风琴要点两次标题才折叠”的问题，根源在于手动修改DOM状态后，jQuery UI手风琴组件的内部状态没有同步更新——组件以为手风琴还是关闭的，第一次点击标题只是在同步状态，第二次才会触发折叠逻辑。下面给你一套完整的解决方案：

第一步：确保手风琴的正确初始化 #

先确认你的Razor生成的手风琴结构，以及jQuery UI初始化代码是规范的。假设你的Razor代码结构如下：

@foreach (var item in Model.MyList)
{
    <div class="accordion-item">
        <h3>@item.Title</h3>
        <div>
            <!-- 这里是手风琴面板的内容 -->
            @item.Content
        </div>
    </div>
}

<button id="expand-button" class="ExpandButton">Expand All</button>

初始化手风琴时，必须开启collapsible属性（允许所有面板折叠），如果需要初始状态全部关闭，还要设置active: false：

$(document).ready(function() {
    // 初始化所有手风琴组件
    $(".accordion-item").accordion({
        collapsible: true, // 允许折叠所有面板
        active: false,     // 初始状态全部关闭（默认是第一个面板打开）
        heightStyle: "content" // 让面板高度自适应内容
    });
});

第二步：用官方API实现批量展开/折叠 #

核心是不要直接操作DOM显示隐藏，而是调用jQuery UI手风琴的官方方法来修改状态，这样组件内部状态会和DOM同步：

$("#expand-button").click(function() {
    var $button = $(this);
    // 遍历所有手风琴实例
    $(".accordion-item").each(function() {
        // 获取手风琴的组件实例
        var accordionInstance = $(this).data("ui-accordion");
        // 判断当前手风琴状态：active为false表示关闭，0表示第一个面板打开
        if (accordionInstance.active === false) {
            // 调用API展开面板
            accordionInstance.option("active", 0);
        } else {
            // 调用API折叠面板
            accordionInstance.option("active", false);
        }
    });
    // 切换按钮文本（可选优化）
    $button.text(function(i, currentText) {
        return currentText === "Expand All" ? "Collapse All" : "Expand All";
    });
});

关键注意事项 #

• 动态内容处理：如果你的列表项是通过Ajax动态加载的，一定要在内容渲染完成后再初始化手风琴，否则新生成的手风琴不会被组件识别。比如：

  // 假设Ajax加载列表项的回调
  $.get("/YourController/GetItems", function(data) {
      $("#list-container").html(data);
      // 初始化新加载的手风琴
      $(".accordion-item").accordion({
          collapsible: true,
          active: false,
          heightStyle: "content"
      });
  });
  

• 避免混合操作：不要同时用原生JS/jQuery的show()/hide()/slideDown()等方法和手风琴API，这会导致状态不一致。

这样修改后，不管是初始关闭的手风琴，还是原本打开的，点击展开/折叠按钮后，再点击标题都能正常触发折叠/展开，不会出现需要点击两次的问题了。

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