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>

- alex494

---

忘记添加了，在HTML的末尾有一个最终的</div>标签。不知何故，StackOverflow不允许我编辑我的问题。 - alex494

可能是重复的问题：jQuery - 点击菜单项时停止手风琴菜单关闭 - TylerH

Answer 1

问题在于您为两个手风琴设置了相同的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/

- Gabriele Petrioli

---

这是正确的，将id更改为class并将#更改为句点就解决了。非常感谢。 - alex494

这对我来说几乎可行，但当我在与Home（即Home2）相同级别的另一个手风琴时失败了。经过一些调整，现在运行得很好。以下是我的更改：http://jsfiddle.net/5e3fquxr/1/ - nmz787

Answer 2

我刚刚使用了你的代码来解决同样的问题，它立即生效了，谢谢。

不确定为什么它有效 -

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

我理解的是： 对于标题，获取直接子元素h3（在class="accordion"后面），但不包括(.item)。

所以，.item必须指代嵌套手风琴类的直接子元素？.item是保留的jQuery词吗？我已经搜索了谷歌，但没有找到任何信息。

- Naj

Answer 3

根据html4和html5规范，您不应该有超过一个元素具有相同的id属性。

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

- DonkeyKong