jQuery UI 手風琴展開/折疊全部

Question

我在一個項目中使用jQuery UI Accordion （它不允許一次打開多個項目）。 利用手風琴，因為通常我只想要一次在一個面板打開為宜。

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

問題：需要什么 JavaScript/jQuery 才能實現這一點，同時仍然使用 jQuery UI“Accordion”組件來支持標准功能？

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

Answer 1

正如jQuery UI 論壇中所討論的，您不應該為此使用手風琴。

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

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>​

卷起你自己的手風琴

大多數情況下，我們只希望手風琴標題切換以下兄弟的狀態，即它的內容區域。 我們還添加了兩個自定義事件“show”和“hide”，我們稍后會用到它們。

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 個面板”實際上要容易得多。 例子

Answer 2

其中許多似乎過於復雜。 我通過以下方式實現了我想要的：

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

JSFiddle

Answer 3

這是我的解決方案：

在實際項目中工作。

   $(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 4

最后，我發現這是考慮到要求的最佳解決方案：

// 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;
});

更新 JSFiddle 鏈接： http : //jsfiddle.net/ccollins1544/r8j105de/4/

Answer 5

我不相信你可以用手風琴做到這一點，因為它是專門設計的，保留了最多打開一件物品的特性。 然而，即使您說不想重新實現手風琴，您也可能高估了所涉及的復雜性。

考慮以下場景，其中您有一個垂直的元素堆棧，

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

如果你很懶惰，你可以使用表格來構建它，否則，適當樣式的 DIV 也可以工作。

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

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

Answer 6

這是由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 7

我之前第二次發表了 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 8

試試這個jquery-multi-open-accordion ，可能對你有幫助

Answer 9

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 10

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

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

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

Answer 11

我發現 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 12

使用有關 Taifun 的示例，我進行了修改以允許展開和折疊。

... // 連接展開/折疊全部

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

expandLink.click(function () {

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

Answer 13

我嘗試了老式版本，只是像許多這些舊答案一樣調整 aria-* 和 CSS 屬性，但最終放棄了，只是做了一個有條件的假點擊。 效果很好'：

HTML：

<a href="#" onclick="expandAll();"
  title="Expand All" alt="Expand All"><img
    src="/images/expand-all-icon.png"/></a>
<a href="#" onclick="collapseAll();"
  title="Collapse All" alt="Collapse All"><img
    src="/images/collapse-all-icon.png"/></a>

Javascript：

async function expandAll() {
  let heads = $(".ui-accordion-header");
  heads.each((index, el) => {
    if ($(el).hasClass("ui-accordion-header-collapsed") === true)
      $(el).trigger("click");
  });
}

async function collapseAll() {
  let heads = $(".ui-accordion-header");
  heads.each((index, el) => {
    if ($(el).hasClass("ui-accordion-header-collapsed") === false)
      $(el).trigger("click");
  });
}

（HTML 換行符放置在那些奇怪的地方以防止演示文稿中出現空格。）

Answer 14

如果您認為每個面板都是獨立的，那么只需將每個面板放在它自己的手風琴中：

$(".accordion-panel").accordion({
            collapsible: true,
            multiple: true,
            active: 0
});

然后在 html 中，您可以將每個部分創建為自己的手風琴。

<div class="accordion-panel">
<h3 class="accordion-header">Section 1</h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
</div>
<div class="accordion-panel">
<h3 class="accordion-header">Section 2</h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
</div>