JQuery UI 嵌套手风琴 - 单击子手风琴将关闭父手风琴

JQuery UI Nested Accordion - clicking on child accordion closes the parent

本文关键字：手风琴 单击 UI 嵌套 JQuery      更新时间：2023-09-26

我正在实现一个嵌套手风琴，但是当我单击父手风琴中的子组件时，它会关闭父级。我希望它在点击孩子时保持打开状态。

.HTML：

<div id="accordion">
    <h3>Home</h3>
    <div id="accordion">
        <h3>Sub-Div1</h3>
        <div>
            <p>This is a sub-div</p>
        </div>
    </div>
</div>

脚本：

<script>
    $("#accordion").accordion({
        header: "> h3:not(.item)",
        heightStyle: "content",
        active: false,
        collapsible: true
    });
</script>

问题是两个手风琴都有相同的 id(一开始是无效的 html(，这使得插件始终与第一个匹配。

如果您使用类，它可以正常工作

<div class="accordion">
    <h3>Home</h3>
    <div class="accordion">
        <h3>Sub-Div1</h3>
        <div>
            <p>This is a sub-div</p>
        </div>
    </div>
</div>

和

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

http://jsfiddle.net/gaby/xmq8xhvp/演示

只是使用您的代码来解决相同的问题，它立即起作用，谢谢。

不知道为什么它有效 - 

header: "> h3:not(.item)",

我读了上面的内容：对于标头，获取直接子 h3(在 class="accordion 之后(，但不获取 (.item(。

那么，.item 必须引用嵌套手风琴类的直接子级吗？ .item 是一个保留的 jquery 词吗？我已经用谷歌搜索过了，但什么也没想出来。

正如html4和html5规范所说：不应有多个元素具有相同的 id 属性。

所以，更改你的父元素或子元素 id 属性，我保证你会没事的。

相关文章：