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 Accordion小部件不支持一次打开多个手风琴。

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

你的代码正在操纵样式，使所有手风琴条目都可见，但它没有改变内部手风琴状态，所以jQueryUI仍然认为所有手风琴都已关闭。

当你点击其中一个“开放式”手风琴项目时，jQueryUI正试图打开手风琴（所以看起来没有任何反应）然后当你再次点击它时它会关闭。

要解决此问题，您可以选择：

更改为支持多个未打开项目的其他Accordion库（例如，Bootstrap Collapse支持此http://getbootstrap.com/javascript/#collapse还有其他库）
如果您希望/需要继续使用jQueryUI，请将页面更改为使用多个单项手风琴。

以下是使用多个Accordions的示例：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 Accordions之间处理该行为。

Answer 2

我同意上述声明“jQueryUI Accordion小部件不支持一次打开多个手风琴”。

我的客户在项目阶段结束时也有类似的要求，并且添加多个手风琴会导致大量的javascript重新工作。

但我确实通过如下小调整来实现这一行为。

在您一次打开所有部分后“单击两次以关闭一部分手风琴”的问题：

1）由于您通过添加/删除类和属性而不是内部处理它的“jquery-ui”脚本来打开手风琴的所有部分，因此未设置手风琴“ACTIVE”选项。 [所以现在你打开了部分但手风琴活动标志是假的]。

2）当您单击以关闭该部分时，第一次单击将设置手风琴上的活动部分。一旦设置了活动部分，下一次点击就会知道要折叠该部分。

如果要查看行为，请在关闭该部分时在引用的“jquery-ui.js”文件中的jquery accordion的“_eventHandler：”方法上添加一个断点。 < / p>

解决方案：

1）我在“全部展开”期间向所有标题部分添加了一个自定义属性，我将从“全部折叠”或单个部分关闭的所有部分中删除该属性。

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点击事件，该事件将设置部分活动仅当所有部分一起打开时。在正常情况下，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");
    }
});

jquery UI手风琴关闭问题

2 个答案:

解决方案：