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 开头），这使得插件始终与第一个相匹配。

如果你使用类它工作正常

<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/