扩展和折叠jQuery UI手风琴的所有部分-Java 学习之路

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

如果展开所有部分，然后单击单个部分 Headers 将其关闭，则它不起作用 . 您必须再次单击它才能将其关闭
尽管删除了ui-accordion-header-active类，但折叠该节时 Headers 图标不会改变

是的，我已经阅读了另一个答案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');
});

任何帮助深表感谢 .

1 回答

我最简单的事情是_1834015 . 问题只是你在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/

回复于 2024-04-29T13:20:17+08:00

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

1 回答

相关问题