jQuery UI手風琴關閉問題

Question

為了創建手風琴，我使用了jQuery ui手風琴。

$('#programOutlineBox table tr td').accordion({
        collapsible: true,
        active: false,
        heightStyle: "content",
        autoHeight: false,
    });

對於全部展開和下面全部折疊的代碼

//expand all

$('#div .ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({'aria-selected':'true','tabindex':'0'});

$('#div .ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');

$('#div .ui-accordion-content').addClass('ui-accordion-content-active').attr({'aria-expanded':'true','aria-hidden':'false'}).slideDown(); 

//collapse all

$('#div .ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({'aria-selected':'false','tabindex':'-1'});

$('#div.ui-accordion-header .ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');

$('#div .ui-accordion-content').removeClass('ui-accordion-content-active').attr({'aria-expanded':'false','aria-hidden':'true'}).slideUp();

但是問題出在我單擊全部展開時，手風琴可以正確打開，但是在逐一關閉單個項目時需要雙擊。難道真的不知道這里出了什么問題嗎？

Answer 1

jQueryUI手風琴小部件不支持一次打開多個手風琴。

請參閱此處的文檔： http : //api.jqueryui.com/accordion/#option-active
您可以一次打開1或0個面板。

您的代碼正在操縱樣式，以使其看起來所有手風琴條目都是可見的，但它並未更改內部手風琴狀態，因此jQueryUI仍然認為所有手風琴都已關閉。

當您單擊這些“打開”的手風琴項目之一時，jQueryUI試圖打開該手風琴（因此看起來什么也沒發生），然后再次單擊它時，它將關閉。

要解決此問題，您可以選擇：

1. 更改為支持多個打開項的其他手風琴庫（例如，Bootstrap Collapse支持此http://getbootstrap.com/javascript/#collapse，那里還有其他庫）

2. 如果您希望/需要繼續使用jQueryUI，則將頁面更改為使用多個單項手風琴。

---

這是使用多個手風琴的示例： http : //jsfiddle.net/Sly_cardinal/WLsUx/2/

HTML：

<h2>Multiple Accordions</h2>
<div id="accordion2">
    <button type="button" class="expand">Expand All</button>
    <button type="button" class="collapse">Collapse All</button>

    <div class="accordion">
        <h3>Section 1</h3>
        <div>
            <p>Vestibulum a velit eu ante scelerisque vulputate.</p>
        </div>
    </div>

    <div class="accordion">
        <h3>Section 2</h3>
        <div>
            <p>Vivamus non quam. In suscipit faucibus urna. </p>
        </div>
    </div>

    <!-- Add as many accordions as needed here... -->
</div>

JavaScript的：

$(function() {
    $(".accordion").accordion({
        // Allows the accordion to be closed - i.e. no item is selected.
        collapsible: true
    });

    $('.expand').click(function(){
        // Trigger each accordion to open it's only element.
        $(".accordion").accordion('option', 'active', 0);
    });

    $('.collapse').click(function(){
        // Close all accordions.
        $(".accordion").accordion('option', 'active', false);
    });
});

如果您一次只允許打開一個手風琴，那么您將需要處理頁面上每個jQueryUI手風琴之間的行為。

Answer 2

我確實同意上面的聲明“ jQueryUI手風琴小部件不支持一次打開多個手風琴”。

在項目階段結束時，我的客戶也有類似的要求，而添加多個手風琴將導致大量的JavaScript返工。

但是我確實通過如下進行一些小的調整來實現了該行為。

“一次打開所有部分后單擊兩次以關閉一個手風琴部分”的問題：

1）由於您通過添加/刪除類和屬性而不是在內部處理“ jquery-ui”腳本來打開手​​風琴的所有部分，因此未設置手風琴的“ ACTIVE”選項。 [所以現在您已經打開了部分，但手風琴活動標志為false]。

2）當您單擊以關閉該部分時，第一次單擊將設置手風琴上的活動部分。 一旦設置了活動部分，下一次單擊將知道折疊該部分。

如果要查看行為，請在關閉該節時在引用的“ jquery-ui.js”文件中的jquery手風琴的“ _eventHandler：”方法上放置一個斷點。

解：

1）我在'expand all'期間向所有標頭節添加了一個自定義屬性，並且我將在'collapse all'或單個節關閉時從所有節中刪除該屬性。

function expandAll() {
var sections = $('.accordion').find("h3");
sections.each(function (index, section) {
    $(this).find("span").removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
    $(this).removeClass("ui-corner-all").addClass("ui-corner-top").addClass("ui-state-active").addClass("ui-state-focus").addClass("ui-accordion-header-active").next().addClass("ui-accordion-content-active").slideToggle();
    $(this).attr({ "aria-selected": "true" }).next().attr({ "aria-expanded": "true", "aria-hidden": "false" });

    //My custom attribute for tracking
    $(this).attr("myCustomCls", "custCls");
});
$('.accordion').accordion();
}

function collapseAll() {
var sections = $('.accordion').find("h3");
sections.each(function (index, section) {
    $(this).find("span").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-triangle-1-e");
    $(this).removeClass("ui-corner-top").addClass("ui-corner-all").removeClass("ui-state-active").removeClass("ui-state-focus").removeClass("ui-accordion-header-active").next().removeClass("ui-accordion-content-active").slideToggle();
    $(this).attr({ "aria-selected": "false" }).next().attr({ "aria-expanded": "false", "aria-hidden": "true" });

    //Removing the custom attribute
    $(this).removeAttr("myCustomCls");
});
$('.accordion').accordion();
}

2）在手風琴的標題上連接一個自定義js click事件，該事件僅在所有部分一起打開時才將其設置為活動狀態。 在正常情況下，jQuery手風琴會處理它。

$(".accordion").find("h3").click(function (event) {
    if ($(this).attr("myCustomCls")) {
        var id = this.id;
        var index = id.substring(id.length - 1);
        $(".accordion").accordion("option", "active", index);

        //Remove the attribute once section is being closed.
        $(this).removeAttr("myCustomCls");
    }
});