jquery嵌套手风琴问题

时间:2010-07-20 19:07:46

标签: jquery nested accordion

有问题的第一个问题是stackoverflow。 所以,问题是: 关于document.ready的两个手风琴声明(jquery 1.4.2和jquery ui 1.8.2):

       $(document).ready(function () {
        $("#accordion").accordion({
            header: 'h3'
        });

        $("#accordion2").accordion({ 
            header: 'h4' 
        });

        $(function () {
            $(".get-index").click(function () {
                var activecontent = $("#accordion").accordion("option", "active");
                alert(activecontent);                   
            });
        });
    });

HTML:

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        Content Section 1: Parent
        <div id="accordion2">
            <h4><a href="#">SubSection 1</a></h4>
            <div>content section 1: child</div>
            <h4><a href="#">SubSection 2</a></h4>
            <div>content section 2: child</div>
            <h4><a href="#">SubSection 3</a></h4>
            <div>content section 3: child</div>
            <h4><a href="#">SubSection 4</a></h4>
            <div>content section 4: child</div>
        </div>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        Content Section 2: Parent
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        Content Section 3: Parent
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        Content Section 4: Parent

        <button type="button" class="get-index ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
            <span class="ui-button-text">index</span>
        </button>

    </div>
</div> 

最后:出了什么问题以及为什么“activecontent”是7?我知道,有4个父面板+4个子面板,从0开始,它是7.但我正在尝试获取最后一个父面板的索引,它应该是3.

任何帮助都非常感激。

已发布的代码:http://jsbin.com/eqewe

1 个答案:

答案 0 :(得分:3)

不幸的是,这是jQuery UI中的一个错误,in the accordion code

o.active = o.collapsible && clickedIsActive ? false 
  : $('.ui-accordion-header', this.element).index(clicked);

它找到了$('.ui-accordion-header'),而不仅仅是您指定的标题选择器,而不仅仅是直接的子项。 我将这个作为jQuery UI人员的错误,.active属性确实应该设置不同。我在这里输入了jQuery UI团队的错误:http://dev.jqueryui.com/ticket/5841


您现在可以通过使用.index()自行查找元素来解决此问题,如下所示:

$(function () {
  $(".get-index").click(function () {
    var a= $("#accordion").children('.ui-state-active').index('#accordion > h3');
    alert(a);                   
  });
});​

You can try it out here