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

Question

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

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>

Answer 1

问题在于，您对于两个手风琴都具有相同的ID（ 以html开头的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/

Answer 2

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

因此，更改您的父元素或子元素id属性，我保证您会好的。

Answer 3

只是使用您的代码来解决相同的问题，并且立刻就起作用了，谢谢。

不知道为什么会这样-

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

我的读法如下：对于标头，获取直接子级h3s（在class =“ accordion之后），但不获取（.item）。

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