jquery动态添加到手风琴

Question

使用jQuery UI中的示例,我尝试动态地为手风琴添加一个部分(基于此),但我无法让手风琴正确调整大小.新的部分溢出了手风琴容器,当它被点击时,它会被挤压到容器中,隐藏了部分内容.看小提琴.

如何添加一个部分并让手风琴调整大小？

$(function() {
    $("#accordion").accordion({
        fillSpace: true
    });

    // I want to dynamically add sections to the accordion,
    // but it doesn't resize properly...
    $("#accordion")
                .append('<h3><a href="#">New Section</a></h3><div><p>hello world</p></div>')
                .accordion("destroy")
                .accordion({ fillSpace:true })
                .accordion("resize")
        ;

    $("#accordionResizer").resizable({
        minHeight: 140,
        resize: function() {
            $("#accordion").accordion("resize");
        }
    });
});

Answer 1

如果删除 AccordionResizer ( height:220px) 上的 height 属性，一切都会正常工作。看起来您选择的高度对于内容来说太低 - 因此会溢出。

如果您需要默认高度以外的其他内容来适应内容，请尝试在每次添加新部分时动态分配 AccordionResizer 的高度。

就像是...

var height = $("#accordion h3").size() * $("#accordion h3:first").height() + 50;
      // add 50px to     allow room for the section contents.
$("#accordionResizer").height(height);