在嵌套的 jQuery Accordion 中汇总子元素答案

【问题标题】：Roll up child elements in nested jQuery Accordion在嵌套的 jQuery Accordion 中汇总子元素
【发布时间】：2010-08-18 03:04:45
【问题描述】：

当使用 jQuery 的 Accordion（以嵌套方式）时，我想确保在单击/打开父元素时，所有打开的子元素都被关闭/卷起。我不确定尝试执行此操作时应该使用什么选择器。到目前为止，我已经尝试将“激活”设置为 false 来操纵更改事件，但这只会使任何打开的元素自动关闭。

假设我只有 1 个嵌套手风琴，我的 jquery 初始化如下所示：

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

        $(".child-accordion").accordion({
            active: false, collapsible: true, autoHeight: false, animated: 'swing',
            change: function(event, ui) { $(".child-accordion").accordion("activate", false); }
        });

其中 .child-accordion 是嵌套实例。当 .accordion 的成员打开时，我需要关闭 .child-accordion 下的任何内容。

【问题讨论】：

更改事件是否应该在 .accordion 类上？..
我试过了，好像没什么效果。

标签： jquery jquery-ui accordion

【解决方案1】：

$(".accordion").accordion({
    collapsible: true,
    autoHeight: false,
    animated: 'swing',
    changestart: function(event, ui) {
        child.accordion("activate", false);
    }
});

var child = $(".child-accordion").accordion({
    active:false,
    collapsible: true,
    autoHeight: false,
    animated: 'swing'
});

您的版本不工作的原因有两个

您的更改事件需要在父节点上，因为您希望子节点在该事件上滚动
您需要创建事件changestart，因为当您将activate 设置为false 时，它所做的主要事情是toggle 子中当前“可见”部分，但是当change事件在父节点上触发，子节点已经隐藏，所以它什么也不做。

编辑：这是http://jsfiddle.net/ryleyb/YPpEn/的工作版本

【讨论】：

完美！这正是我想要的。