jQuery-手风琴（反折叠）

这个问题是我的下一个版本

由于我有所有的链接折叠，我想创建一个按钮或链接说显示全部，点击它将使所有链接在手风琴活动，即我想查看所有链接的数据。还需要创建一个按钮或链接说隐藏所有这将使折叠状态如前所述

崩溃状态

+++++++++++++++++++++++++++++++++++++++
+   Link 1                            +
+   Link 2                            +
+   Link 3                            +
+   Link 4                            +
+++++++++++++++++++++++++++++++++++++++

应在单击“全部显示”后获取

+++++++++++++++++++++++++++++++++++++++
+   Link 1                            +
+     Link 1 line 1                   +
+     Link 1 line 2                   +
+     Link 1 line 3                   +
+   Link 2                            +
+     Link 2 line 1                   +
+     Link 2 line 2                   +
+     Link 2 line 3                   +
+   Link 3                            +
+     Link 3 line 1                   +
+     Link 3 line 2                   +
+   Link 4                            +
+     Link 4 line 1                   +
+     Link 4 line 2                   +
+++++++++++++++++++++++++++++++++++++++

如何做到这一点？

作为黑客的最后手段，您可以使用

// highlight headers
$("#accordion001").find('h3.ui-accordion-header')
                  .removeClass('ui-state-default')
                  .addClass('ui-state-active');

//open content panels
$("#accordion001").find('div.ui-accordion-content')
                  .addClass('ui-accordion-content-active')
                  .show();

---

但是您还需要处理关闭操作撤消我们所做的操作，因为当前代码会破坏默认行为。

以下是展开和折叠所有内容面板的解决方案

function expandAll() {
    $('#accordion h3').removeClass('ui-state-default')
        .addClass('ui-state-active')
        .removeClass('ui-corner-all')
        .addClass('ui-corner-top')
        .attr('aria-expanded', 'true')
        .attr('aria-selected', 'true')
        .attr('tabIndex', 0)
    .find('span.ui-icon')
        .removeClass('ui-icon-triangle-1-e')
        .addClass('ui-icon-triangle-1-s')
    .closest('h3').next('div')
        .show();

    $('.expand').text('collapse all').unbind('click').bind('click', collapseAll);

    $('#accordion h3').bind('click.collapse', function() {
        collapseAll();
        $(this).click();
    });
}

function collapseAll() {
    $('#accordion h3').unbind('click.collapse');

    $('#accordion h3').removeClass('ui-state-active')
            .addClass('ui-state-default')
            .removeClass('ui-corner-top')
            .addClass('ui-corner-all')
            .attr('aria-expanded', 'false')
            .attr('aria-selected', 'false')
            .attr('tabIndex', -1)
        .find('span.ui-icon')
            .removeClass('ui-icon-triangle-1-s')
            .addClass('ui-icon-triangle-1-e')
        .closest('h3').next('div')
            .hide();

    $('.expand').text('expand all').unbind('click').bind('click', expandAll);

    $('#accordion').accordion('destroy').accordion();
}

小提琴呢

---

这可能会帮助你，如果你想让他们都扩大，那么你不应该使用标准的手风琴。正如jQueryUIAccordion手册页上指出的那样，它不是正确的控件。@FahimParkar检查我的答案下面。它会满足你的要求。不需要手风琴菜单。@Ravichandran:我不是说菜单。。。我说的是ACCRDION…@Adriano:那我应该用什么呢？