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

获得了需要手风琴的项目，并且需要“展开全部/全部折叠”控件。它的工作原理，但有两个问题：展开和折叠jQuery UI手风琴的所有部分

如果展开所有部分，然后单击单节头将其关闭，这是行不通的。你必须点击它第二次将其关闭
头图标不会改变，当你崩溃的部分，尽管卸下UI的手风琴头，活动类

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

任何帮助深表感谢。

来源

2015-10-07 DeanH

我会先回答第二个问题，因为它是最简单的。问题很简单，就是在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/

来源

2015-10-08 01:17:20

哇，太棒了！谢谢保罗！ – DeanH

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

回答

相关问题