展开和折叠 jQuery UI 手风琴的所有部分

Question

有一个需要手风琴的项目，并且需要“全部展开/全部折叠”控件。它有效，但有两个问题：

1. 如果展开所有部分，然后单击单个部分标题将其关闭，则它不起作用。您必须再次单击它才能关闭它

2. 尽管删除了 ui-accordion-header-active 类，但折叠部分时标题图标不会改变

是的，我已经阅读了另一个答案here。我不想自己动手，因为客户已经在其他地方使用 jquery ui 手风琴，我想保持一致。

这是一个小提琴：

https://jsfiddle.net/7k1stb6d/

这是我的 js：

$(".accordion").accordion({
    collapsible: true,
    active: false
});

$(document).on('click', '.toggle-help', function (event) {
    $(this).toggleClass('show-all hide-all');
    $(this).text(function (i, v) {
        return v === 'Expand All Topics' ? 'Collapse All Topics' : 'Expand All Topics';
    })
});

$(document).on('click', '.show-all', function (event) {
    $('.accordion .ui-accordion-content').css("display", "block").attr('aria-expanded', 'true').attr('aria-hidden', 'false');
    $('.accordion .ui-accordion-header').removeClass('.ui-accordion-header-active');
});
$(document).on('click', '.hide-all', function (event) {
    $('.accordion .ui-accordion-content').css("display", "none").attr('aria-expanded', 'false').attr('aria-hidden', 'true');
    $('.accordion .ui-accordion-header').addClass('.ui-accordion-header-active');
});

非常感谢任何帮助。

Answer 1

我先回答第二个问题，因为它最简单。问题只是您在 addClass 和 removeClass 函数中的类之前添加了一个句点，这将句点添加到类列表本身。去掉句号就可以正常工作了：addClass('ui-accordion-header-active');

第一个问题有点难。手风琴不喜欢活动的项目不止一个，而且在课堂上乱搞会使所有这一切变得复杂。与其在点击本身上使用您的添加/删除类功能，不如将其添加到手风琴构造函数并从那里开始。我从这里借用了功能：jQuery UI accordion that keeps multiple sections open? 来弄清楚如何拥有多个活动但保留手风琴。它将所需的行为注入到beforeActivate 事件中：

$('#accordion').accordion({
    collapsible:true,

    beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancels the default action
    }
});

然后，点击本身会检查是否已经点击了任何项目，以避免显示/隐藏切换出现问题。之后检查它通过 active 选项 (http://api.jqueryui.com/accordion/#option-active) 将该项目设置为活动的，然后通过现在在手风琴中设置的 beforeActive 函数：

$(document).on('click', '.show-all', function (event) {
    $(".ui-accordion-header").each(function(i) {
        if($(this).attr('aria-selected') == 'false') {
            $( ".accordion" ).accordion( "option", "active", i);
        }
    });
});

我全部设置在这里：https://jsfiddle.net/7k1stb6d/7/