javascript - jquery UI Accordion 关闭问题

Question

为了创建 Accordion ，我使用了 jquery ui Accordion 。

$('#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();

但是当我点击全部展开时，问题就来了， Accordion 可以正常打开，但是在一个接一个地关闭单个元素时需要双击它。真的不知道这里出了什么问题吗？

Answer 1

jQueryUI Accordion 小部件不支持一次打开多个 Accordion 。

请参阅此处的文档:http://api.jqueryui.com/accordion/#option-active
您一次可以打开 1 个或 0 个面板。

您的代码正在操纵样式，使所有 Accordion 条目看起来都是可见的，但它没有改变内部 Accordion 状态，因此 jQueryUI 仍然认为所有 Accordion 都已关闭。

当您单击这些“打开” Accordion 项之一时，jQueryUI 会尝试打开该 Accordion (因此看起来什么也没发生)，然后当您再次单击它时，它会关闭。

要解决此问题，您的选择是:

1. 更改为支持多个打开项的不同 Accordion 库(例如，Bootstrap Collapse 支持此 http://getbootstrap.com/javascript/#collapse 还有其他库)

2. 如果您想要/需要继续使用 jQueryUI，请更改您的页面以使用多个单项 Accordion 。

---

这是一个使用多个 Accordion 的例子: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);
    });
});

如果您需要一次只允许打开一个 Accordion，那么您将需要处理页面上每个 jQueryUI Accordion 之间的行为。