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