Question

有一个需要手风琴的项目，需要一个＆＃34;全部展开/全部折叠＆＃34;控制。它有效，但有两个问题：

如果展开所有部分，然后单击一个部分标题将其关闭，则它不起作用。您必须再次单击它才能将其关闭
尽管删除了ui-accordion-header-active类

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

这是一个小提琴：

这是我的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
    }
});

然后点击自己检查是否已经点击了任何项目以避免显示/隐藏切换问题。在该检查之后，它通过活动选项（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手风琴的所有部分

1 个答案: