Question

Tl; dr：滚动到底部以获得更简单的解释。

我想我有一个稍微独特的问题。首先......我已经查看了互联网/谷歌，包括网站，以及提出这个问题时的建议。

回到手头的主题，我正在生成一系列嵌套的手风琴，其中动态生成嵌套量。也就是说，底层物品可以拥有多少父母没有设置限制，因此，不能选择'.acord1，.acord2，.acord3'等。

解决问题..手风琴中的一些标题是底级项目，没有孩子，没有附加手风琴。

下面的示例html不包含上述项目，因为它重现了所面临的问题，这是因为当添加header:选项（我用它来排除前面提到的项目）时，它会触发顶级手风琴，当其中一个孩子被点击时关闭它。

以下是我用最少的代码重现的测试用例：

<div class="acord">
    <h3>test1</h3>
    <div class="acord">
        <h3>test2</h3>
        <div>test2cont</div>
    </div>
    <h3 class="item">test3</h3>
</div>

$(".acord").accordion({
    header: "h3:not(.item)",
    heightStyle: "content",
    active: false,
    collapsible: true,
});

如果上面是tl;dr，指定带有嵌套手风琴的标题选项不起作用，作为子手风琴的父级（单击），然后关闭。

Js Fiddle

有解决方案吗？

Answer 1

以下是我管理的解决方法。这很丑陋，但有一些其他的事情可以完成工作。如果有人比删除图标和填充并点击jquery手风琴标题的功能有任何更好的想法，请回答这个问题。在那之前：

$(".acord").accordion({
    heightStyle: "content",
    active: false,
    collapsible: true,
    changestart: function (event, ui) {
        if ($(event.currentTarget).hasClass("item")) {
            event.preventDefault();
            $(event.currentTarget).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    }
});

修改

感谢jQuery bug tracker的人们，这已经通过更好的解决方案得到了解决：

$(".acord").accordion({ header: "> h3:not(.item)", //this line heightStyle: "content", active: false, collapsible: true });

Jquery UI嵌套手风琴的问题;标题选项会干扰嵌套的手风琴

1 个答案: