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

Question

有一个项目需要 ui 手风琴，并且需要 "expand all / collapse all" 控件。它有效，但有两个问题：

如果您展开所有部分，然后单击单个部分 header 将其关闭，这是行不通的。您必须再次单击它才能关闭它
尽管删除了 ui-accordion-header-active class

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

这是一个fiddle：

这是我的 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 函数中的 class 之前添加了一个句点，而这会将句点添加到 class 列表本身。删除句点，它可以正常工作：addClass('ui-accordion-header-active');

第一题有点难。手风琴不喜欢有一个以上的项目处于活动状态，并且弄乱 classes 会使所有这一切复杂化。与其在点击本身上使用 add/remove class 功能，不如将其添加到手风琴构造函数并从那里开始。我从这里借用了功能：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
    }
});

然后点击本身会检查是否已经点击了任何项目以避免 show/hide 切换出现问题。检查之后，它通过活动选项 (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/

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

Expanding and collapsing all sections of a jQuery UI accordion

jquery

jquery-ui

jquery-ui-accordion