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

Problems with Jquery UI nested accordions; header option interferes with nested accordions

本文关键字：嵌套 选项 干扰 折叠 手风琴 UI 问题 Jquery      更新时间：2023-09-26

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 小提琴

有解决办法吗？

以下是我管理的解决方法。 它很丑陋，但通过其他一些事情，它可以完成工作。 如果有人比删除 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错误跟踪器的人，这已经通过更好的解决方案解决了：

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