jquery - 展开和折叠 jQuery UI Accordion 的所有部分

Question

有一个需要 Accordion 的项目，并且需要“全部展开/全部折叠”控件。它可以工作，但有两个问题:

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

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

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

这是一个 fiddle :

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

第一个问题有点难。 Accordion 不喜欢有多个项目处于事件状态，并且与类混在一起会使所有这一切变得复杂。与其在点击本身上使用添加/删除类功能，不如将其添加到 Accordion 构造函数中并从那里开始。我从这里借用了该功能:jQuery UI accordion that keeps multiple sections open?弄清楚如何拥有多个事件但保留 Accordion 。它将所需的行为注入(inject)到 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
    }
});

然后，点击本身会检查是否已点击任何项目，以避免显示/隐藏切换出现问题。检查之后，它通过事件选项( http://api.jqueryui.com/accordion/#option-active )将该项目设置为事件状态，然后通过现在在 Accordion 中设置的 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/