展開和摺疊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手風琴的所有部分

回答

相關問題