jQuery UI Accordion展開/摺疊全部

Question

我在項目中使用了jQuery UI Accordion（其確實不允許在一個時間打開多個項目）。使用手風琴是合適的，因爲我通常做只需要一次打開一個面板。

但是，我需要提供一個「全部展開」鏈接，點擊時切換到「摺疊全部」。我不想自定義圍繞這一要求編寫幾乎相同的手風琴功能，所以我希望一些JS能夠實現這一點，同時保持Accordion組件的使用。

問題：需要JavaScript/jQuery來達到此目的，同時仍然使用jQuery UI「Accordion」組件來支持標準功能？

這裏有一個小提琴：http://jsfiddle.net/alecrust/a6Cu7/

Answer 1

在我發現這是最好的解決方案考慮要求結束：

// Expand/Collapse all 
$('.accordion-expand-collapse a').click(function() { 
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideToggle(); 
    $(this).text($(this).text() == 'Expand all' ? 'Collapse all' : 'Expand all'); 
    $(this).toggleClass('collapse'); 
    return false; 
}); 

Answer 2

我不相信你可以用手風琴做到這一點，因爲它是專門保留頂多一個項目將被打開的屬性。然而，即使你說你不想重新實施手風琴，你也可能過於估計所涉及的複雜性。

考慮以下情況，你有元素的垂直堆疊，

++++++++++++++++++++ 
+  Header 1  + 
++++++++++++++++++++ 
+     + 
+  Item 1  + 
+     + 
++++++++++++++++++++ 
+  Header 2  + 
++++++++++++++++++++ 
+     + 
+  Item 2  + 
+     + 
++++++++++++++++++++ 

如果你懶，你可以建立這個使用表，否則，適當風格的DIV也會起作用。

每個項目塊可以有一類itemBlock。點擊標題將會導致類itemBlock的所有元素被隱藏（$(".itemBlock").hide()）。然後，您可以使用jquery slideDown()函數展開標題下的項目。現在你已經實現了手風琴。

要展開所有項目，只需使用$(".itemBlock").show()或者如果你想動畫，$(".itemBlock").slideDown(500)。要隱藏所有項目，請使用$(".itemBlock").hide()。

Answer 3

As discussed在jQuery UI論壇中，您不應該對此使用手風琴。

如果你想看起來像手風琴一樣的東西，那很好。使用他們的類來設計它們，並實現您需要的任何功能。然後添加一個按鈕來打開或關閉它們都非常簡單。 Example

HTML

通過使用jQuery UI類，我們保持我們的手風琴看着就像 「真正的」 手風琴。

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset"> 
    <h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"> 
     <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span> 
     Section 1 
    </h3> 
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
     Content 1 
    </div> 
</div>​ 

推出自己的手風琴

主要是我們只想手風琴頭切換以下的兄弟姐妹，這是它的內容區域的狀態。我們還添加了兩個自定義事件「顯示」和「隱藏」，我們將在稍後介紹。

var headers = $('#accordion .accordion-header'); 
var contentAreas = $('#accordion .ui-accordion-content ').hide(); 
var expandLink = $('.accordion-expand-all'); 

headers.click(function() { 
    var panel = $(this).next(); 
    var isOpen = panel.is(':visible'); 

    // open or close as necessary 
    panel[isOpen? 'slideUp': 'slideDown']() 
     // trigger the correct custom event 
     .trigger(isOpen? 'hide': 'show'); 

    // stop the link from causing a pagescroll 
    return false; 
}); 

展開/收起所有

我們使用一個布爾isAllOpen標誌當按鈕已被更改爲標記，這可以很容易地是一個類，或者一個更大的插件的狀態變量框架。

expandLink.click(function(){ 
    var isAllOpen = $(this).data('isAllOpen'); 

    contentAreas[isAllOpen? 'hide': 'show']() 
     .trigger(isAllOpen? 'hide': 'show'); 
}); 

交換按鈕時，「全部打開」

由於我們自定義的「顯示」和「隱藏」的事件，我們有話要聽，當面板正在改變。唯一的特殊情況是「它們全部打開」，如果是，該按鈕應該是「全部摺疊」，否則應該是「全部展開」。

contentAreas.on({ 
    // whenever we open a panel, check to see if they're all open 
    // if all open, swap the button to collapser 
    show: function(){ 
     var isAllOpen = !contentAreas.is(':hidden'); 
     if(isAllOpen){ 
      expandLink.text('Collapse All') 
       .data('isAllOpen', true); 
     } 
    }, 
    // whenever we close a panel, check to see if they're all open 
    // if not all open, swap the button to expander 
    hide: function(){ 
     var isAllOpen = !contentAreas.is(':hidden'); 
     if(!isAllOpen){ 
      expandLink.text('Expand all') 
      .data('isAllOpen', false); 
     } 
    } 
});​ 

編輯發表評論： 維持「1個面板只開放」，除非你點擊「全部展開」按鈕實際上是容易得多。 Example

Answer 4

嘗試這一個jquery-multi-open-accordion，可以幫助你

Answer 5

這是我的解決方案：

在實際工作項目。

$(function() { 
    $("#accordion").accordion({collapsible:true, active:false}); 
    $('.open').click(function() { 
     $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'}); 
     $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s'); 
     $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).show(); 
     $(this).hide(); 
     $('.close').show(); 
    }); 
    $('.close').click(function() { 
     $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'}); 
     $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); 
     $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide(); 
     $(this).hide(); 
     $('.open').show(); 
    }); 
    $('.ui-accordion-header').click(function() { 
     $('.open').show(); 
     $('.close').show(); 
    }); 
}); 

http://jsfiddle.net/bigvax/hEApL/

Answer 6

Yes, it is possible. Put all div in separate accordion class as follows: 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery-ui.js"></script> 

<script type="text/javascript"> 

     $(function() { 
      $("input[type=submit], button") 
     .button() 
     .click(function (event) { 
      event.preventDefault(); 
     }); 
      $("#tabs").tabs(); 
      $(".accordion").accordion({ 
       heightStyle: "content", 

       collapsible: true, 
       active: 0 



      }); 
     }); 

function expandAll() 
{ 
    $(".accordion").accordion({ 
       heightStyle: "content", 

       collapsible: true, 
       active: 0 

      }); 

      return false; 
} 

function collapseAll() 
{ 
    $(".accordion").accordion({ 
       heightStyle: "content", 

       collapsible: true, 
       active: false 



      }); 
      return false; 
} 
</script> 



<div class="accordion"> 
    <h3>Toggle 1</h3> 
    <div > 
    <p>text1.</p> 
    </div> 
</div> 
<div class="accordion"> 
    <h3>Toggle 2</h3> 
    <div > 
    <p>text2.</p> 
    </div> 
</div> 
<div class="accordion"> 
    <h3>Toggle 3</h3> 
    <div > 
    <p>text3.</p> 
    </div> 
</div> 

Answer 7

這是一個被Sinetheta代碼轉換爲jQuery插件： 保存下面的代碼到一個js文件。

$.fn.collapsible = function() { 
    $(this).addClass("ui-accordion ui-widget ui-helper-reset"); 
    var headers = $(this).children("h3"); 
    headers.addClass("accordion-header ui-accordion-header ui-helper-reset ui-state-active ui-accordion-icons ui-corner-all"); 
    headers.append('<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s">'); 
    headers.click(function() { 
     var header = $(this); 
     var panel = $(this).next(); 
     var isOpen = panel.is(":visible"); 
     if(isOpen) { 
      panel.slideUp("fast", function() { 
       panel.hide(); 
       header.removeClass("ui-state-active") 
        .addClass("ui-state-default") 
        .children("span").removeClass("ui-icon-triangle-1-s") 
         .addClass("ui-icon-triangle-1-e"); 
      }); 
     } 
     else { 
      panel.slideDown("fast", function() { 
       panel.show(); 
       header.removeClass("ui-state-default") 
        .addClass("ui-state-active") 
        .children("span").removeClass("ui-icon-triangle-1-e") 
         .addClass("ui-icon-triangle-1-s"); 
      }); 
     } 
    }); 
}; 

參考它在你的UI頁面，並呼籲類似jQuery的手風琴電話：

$("#accordion").collapsible(); 

看起來更清潔，避免任何類都被添加到標記。

Answer 8

我第二bigvax意見的前面，但你需要確保你添加

 jQuery("#jQueryUIAccordion").({ active: false, 
           collapsible: true }); 

否則您將無法倒塌他們之後打開第一手風琴。

$('.close').click(function() { 
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'}); 
    $('.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e'); 
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).hide(); 
    } 

Answer 9

你可以試試這個輕量級的小插件。

它將允許您根據您的要求對其進行定製。它將具有展開/摺疊功能。

網址：http://accordion-cd.blogspot.com/

Answer 10

我發現AlecRust的解決方案非常有幫助的，但我添加的東西來解決一個問題：當你在一個單一的手風琴單擊展開它，然後你點擊按鈕展開，他們將全部被打開。但是，如果再次單擊按鈕以摺疊，單手風琴之前展開的內容將不會崩潰。

我已經使用了imageButton，但是您也可以將該邏輯應用於按鈕。

/*** Expand all ***/ 
$(".expandAll").click(function (event) { 
    $('.accordion .ui-accordion-header:not(.ui-state-active)').next().slideDown(); 

    return false; 
}); 

/*** Collapse all ***/ 
$(".collapseAll").click(function (event) { 
    $('.accordion').accordion({ 
     collapsible: true, 
     active: false 
    }); 

    $('.accordion .ui-accordion-header').next().slideUp(); 

    return false; 
}); 

此外，如果你有一個手風琴內手風琴，要展開所有隻在第二個層次，你可以添加查詢：

/*** Expand all Second Level ***/ 
$(".expandAll").click(function (event) { 
    $('.accordion .ui-accordion-header:not(.ui-state-active)').nextAll(':has(.accordion .ui-accordion-header)').slideDown(); 

    return false; 
}); 

Answer 11

很多這些似乎過於複雜。我實現了我想要的東西只有以下幾點：

$(".ui-accordion-content").show(); 

JSFiddle

Answer 12

使用有關TAIFUN， 一個例子，我修改，以便展開和摺疊。

... //掛鉤的展開/摺疊所有

var expandLink = $('.accordion-expand-all'); 

expandLink.click(function() { 

$(".ui-accordion-content").toggle(); 
});