jquery嵌套手风琴问题

发布于 2024-09-10 19:58:50 字数 2192 浏览 10 评论 0原文

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

First question ever asked at stackoverflow.
So, problem is:
Two accordion declarations on document.ready (jquery 1.4.2 and 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> 

And finally: what's wrong and why "activecontent" is 7? I know, that there are 4 parent panels + 4 child panels and starting from 0, it is 7. But I'm trying to get index of last parent panel and it should be 3.

Any help much appreciated.

Code posted: http://jsbin.com/eqewe

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

最近可好 2024-09-17 19:58:53

不幸的是,这是 jQuery UI 中的一个错误, 在手风琴代码中

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);                   
  });
});​

您可以在这里尝试一下

Unfortunately this is a bug in jQuery UI, in the accordion code:

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

It's finding any $('.ui-accordion-header'), not just the header selector you specified and not only immediate children. I'll put this in as a bug with the jQuery UI guys, the .active property really should be set differently. I've entered a bug with the jQuery UI team for this here: http://dev.jqueryui.com/ticket/5841


You can work-around it for now by finding the element yourself with .index(), like this:

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

You can try it out here

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文