JQuery UI Nested Accordion - 单击子手风琴将关闭父级

时间:2014-12-18 19:19:58

标签: javascript jquery html css jquery-ui

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

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>

3 个答案:

答案 0 :(得分:0)

由于html4html5规范说: 您不应该有多个具有相同id属性的元素。

因此,更改您的父元素或子元素ID属性,我保证您会没事的。

答案 1 :(得分:0)

问题是两个手风琴都有相同的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/

演示

答案 2 :(得分:0)

只是使用你的代码解决了同样的问题,它立刻就可以了,谢谢。

不确定为什么它有效 -

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

我读到以上内容: 对于标题,获取直接子h3s(在class =“accordion之后),但不是(.item)。

那么,.item必须引用嵌套的手风琴类的直接孩子? .item是一个保留的jquery字吗?我用谷歌搜索了它,但没有想出任何东西。