如何在一个页面上展开/折叠多个单独的jquery手风琴

Question

我有一个剃刀页面，在那里我想要一个单独的，可折叠的标题，每个行项目在一个模型。我想在页面上创建一个按钮，在那里它找到页面上每一个带有某个类的手风琴，并展开它们。

我有它非常接近工作，但在展开一些在页面加载时关闭的东西后，你必须点击该手风琴的头部两次，以使它再次折叠

这大概是我的剃刀代码

<button id="expand-button" class="ExpandButton">Expand/Collapse All</button>
foreach (ViewDetailViewModel di in Model.Details)
{
    string accordionClass, headerClass;
    if (di.RelevantForUser)
    {
        accordionClass = "expandedAccordion";
        headerClass = "relevantHeader";
    }
    else
    {
        accordionClass = "collapsedAccordion";
        if (di.Type == LineType.Cancelled)
        {
            headerClass = "cancelledHeader";
        }
        else
        {
            headerClass = "irrelevantHeader";
        }
    }

    <div id="accordion-lineitem-@(di.LineNum)" class="@(accordionClass) lineItemAccordion">
        <h3 class="@(headerClass) lineItemHeader">Line Item @di.LineNum</h3>
        <div id="lineitem-@(di.LineNum)-panel" class="lineitem-panel">
          <!--content-->
        </div>
    </div>

}

这是创建手风琴的jquery

$(function() {
  $(".expandedAccordion").accordion({
      collapsible: true,
      icons : { header : 'ui-icon-circle-plus', activeHeader :'ui-icon-circle-minus'}

  });
  $(".collapsedAccordion").accordion({
      collapsible: true,
      active: false,
      icons: { header: 'ui-icon-circle-plus', activeHeader: 'ui-icon-circle-minus' }
  });
});

在添加展开/折叠按钮代码之前，使用所有这些代码，手风琴都可以很好地工作

$('#expand-button')
    .click(function (event) {
         var panels = $('.lineitem-panel');
         var icons = $('#details .ui-accordion-header-icon');
         if (panels.data('slided') === true) {
             panels.data('slided', false);
             panels.slideUp();
         }
         else {
             panels.data('slided', true);
             panels.slideDown();
         }
});

“展开/折叠所有”按钮实际上用于在视觉上折叠/展开手风琴，但它不会更新每个手风琴的jquery中的“状态”。

例如，如果lineitem-3作为折叠的手风琴加载，然后单击“展开/折叠全部”按钮，折叠的手风琴将在视觉上展开。然而，jquery并不认为手风琴现在已经展开了：图标没有改变，jquery也不理解面板已经展开了。因此，要使用图标重新折叠line-item3，我必须单击它两次：一次是将它置于jquery的“expanded”状态（即使它已经在视觉上展开），第二次是将它置于“expanded”状态（视觉上和jquery状态）。

所以我的具体问题是：是否有其他方法可以折叠/展开所有手风琴，使jquery能够识别“state”开关

Answer 1

我自己找到了答案，如果有人偶然发现了这个，我想把它贴在这里。它实际上非常简单，只需使用手风琴div而不是面板div并利用手风琴的活动属性

       $('#expand-button')
        .click(function (event) {
            var accordiondivs = $('.lineItemAccordion')
            if (accordiondivs.data('slided') === true) {
                accordiondivs.data('slided', false);
                accordiondivs.accordion('option', { active: false })
            }
            else if (accordiondivs.data('slided') === false) {
                accordiondivs.data('slided', true);
                accordiondivs.accordion('option', "active", 0)
            }
            else {
                accordiondivs.data('slided', true);
                $('.collapsedAccordion').accordion('option', 'active', 0 );
            }
    });