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（即使它已经在视觉上展开），第二个将它放入崩溃的“崩溃”状态（视觉和jquery状态）。

所以我的具体问题是：是否有另一种折叠/扩展所有手风琴的方法，其中jquery将识别“状态”开关

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 );
            }
    });

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

1 个答案: