使用ajax(MVC)的JQuery UI手风琴高度问题

时间:2013-09-06 13:25:53

标签: javascript ajax asp.net-mvc jquery-ui

当使用ajax填充JQuery UI手风琴的面板时,一切正常,但面板的高度不依赖于内容。实际上面板是一条带有滚动条的线。 用于填充面板的脚本:

$(".accordion").accordion({
        header: '> div > h3',
        autoHeight: false,
        active: false,
        collapsible: true,
        beforeActivate: function (event, ui) {
            var id = ui.newPanel.attr('id');
            id = id.replace("QID_", "");

            $.ajax({
                url: '@Url.Action("GetAnswers")',
                data: { QuestionId: id },
                type: 'POST',
                async: false,
                success: function (result) {
                    $("#QID_" + id).html(result);
                }
            });
        }
    })

参数autoHeight设置为false以使面板可排序。将其设置为true并不会使它变得更好。解决方法最初是在空白处填充空白:

<div id='QID_@item.QuestionId'>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

希望不是最好的解决方案。如何获得可靠的面板高度?谢谢你的帮助!

1 个答案:

答案 0 :(得分:0)

您是否尝试刷新其内容?

$(".accordion").accordion({
    header: '> div > h3',
    autoHeight: false,
    active: false,
    collapsible: true,
    beforeActivate: function (event, ui) {
        var id = ui.newPanel.attr('id');
        id = id.replace("QID_", "");

        $.ajax({
            url: '@Url.Action("GetAnswers")',
            data: { QuestionId: id },
            type: 'POST',
            async: false,
            success: function (result) {
                $("#QID_" + id).html(result);
                // Refresh
                $(".accordion").accordion().refresh();
            }
        });
    }
})

我在文档中找不到选项autoHeight。你的意思是heightStyle: "content"而不是吗?