JQuery UI嵌套手风琴 - 点击子手风琴关闭父答案

【问题标题】：JQuery UI Nested Accordion - clicking on child accordion closes the parentJQuery UI嵌套手风琴 - 点击子手风琴关闭父
【发布时间】：2015-02-17 16:24:37
【问题描述】：

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

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>

【问题讨论】：

忘记添加了，在 HTML 的末尾有一个最终的
标签。由于某种原因，StackOverflow 不允许我编辑我的问题。

jQuery - Stop accordion menu from closing when menu item clicked 的可能重复项

标签： javascript jquery html css jquery-ui

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

问题是两个手风琴的 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/的演示

【讨论】：

这是正确的，将 id 更改为 class 并将 # 更改为句号修复了它。非常感谢。
这几乎对我有用，但是当我有另一个与Home（即Home2）相同级别的手风琴时失败了。经过一些调整，它工作得很好。这是我的更改：jsfiddle.net/5e3fquxr/1

【解决方案3】：

刚刚使用您的代码解决了同样的问题，它立即工作，谢谢。

不知道为什么它会起作用 -

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

我将以上内容读为：对于标题，获取直接子 h3s（在 class="accordion 之后），但不是 (.item)。

那么，.item 必须引用嵌套手风琴类的直接子级？ .item 是保留的 jquery 单词吗？我用谷歌搜索了它，但没有想到任何东西。

【讨论】：