Question

我想创建一个嵌套的jquery手风琴，但输出不正确。我创造了一个小提琴。 http://jsfiddle.net/p3Dnp/

<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
    <script>
$(function() {
 $( "#accordion" ).accordion({ header: "h3", collapsible: true, active: false });
});
$('div.accordion').accordion({
        autoHeight: false,
        collapsible: true,
        active: false
    });
</script>
</head>
<body>
    <div id="accordion">
        <h3>1</h3>
        <div>
            <p>                 
            </p>
            <div id="accordion">
                <h3>11</h3>
                <div>
                    <p>                 
                    </p>
            </div>
            <div id="accordion">
                <h3>12</h3>
                <div>
                    <p>                 
                    </p>
            </div>
        </div>
    </div>
    <div id="accordion">
        <h3>2</h3>
        <div>
            <p>                 
            </p>
            <div id="accordion">
                <h3>21</h3>
                <div>
                    <p>                 
                    </p>
            </div>
            <div id="accordion">
                <h3>22</h3>
                <div>
                    <p>                 
                    </p>
            </div>
        </div>
    </div>
    <div id="accordion">
        <h3>3</h3>
        <div>
            <p>                 
            </p>
            <div id="accordion">
                <h3>31</h3>
                <div>
                    <p>                 
                    </p>
            </div>
            <div id="accordion">
                <h3>32</h3>
                <div>
                    <p>                 
                    </p>
            </div>
        </div>
    </div>
</body>
</html>

正如您所看到的，当我添加嵌套手风琴时，它只会吃掉父手风琴标题任何帮助表示赞赏

Answer 1

你的HTML有不正确的结束div并且id不能重复该部分，我们必须使用class属性来嵌套手风琴你的标记应该是这样的，

<div class="accordion">
        <h3>1</h3>
        <div>
            <p>                 
            </p>
            <div class="accordion">
                <h3>11</h3>
                <div>
                    <p>                 
                    </p>
            </div>
            </div>
            <div class="accordion">
                <h3>12</h3>
                <div>
                    <p>                 
                    </p>
            </div>
        </div>
    </div>
</div>

<div class="accordion">
        <h3>2</h3>
        <div>
            <p>                 
            </p>
            <div class="accordion">
                <h3>21</h3>
                <div>
                    <p>                 
                    </p>
            </div>
            </div>
            <div class="accordion">
                <h3>22</h3>
                <div>
                    <p>                 
                    </p>
            </div>
        </div>
    </div>
</div>
    <div class="accordion">
        <h3>3</h3>
        <div>
            <p>                 
            </p>
            <div class="accordion">
                <h3>31</h3>
                <div>
                    <p>                 
                    </p>
            </div>
            </div>
            <div class="accordion">
                <h3>32</h3>
                <div>
                    <p>                 
                    </p>
            </div>
        </div>
    </div>
</div>

一个手风琴电话对我们来说已经足够了

$('div.accordion').accordion({
        autoHeight: false,
        collapsible: true,
        active: false
    });

我更新了FIDDLE。我想这就是你所期待的。

Answer 2

确保按照文档对嵌套的手风琴使用唯一的 header attribute selectors，

<块引用>

标题元素的选择器，通过 .find() 应用于主手风琴元素。内容面板必须是其关联标题之后的同级面板。

这意味着如果您没有定义唯一的选择器（默认为 h3），它会将点击事件绑定到所有 .find('h3') 元素，因此内部手风琴也会触发外部手风琴。

因此，做类似的事情

$('#accordion').accordion(
  autoHeight: false,
  collapsible: true,
  active: false,
  header: '> h3'
});

这确保只有直接的 h3 子项用作标题。

嵌套的jquery手风琴无效

2 个答案: