【问题标题】:JQuery UI accordion height issue using ajax (MVC)使用 ajax (MVC) 的 JQuery UI 手风琴高度问题
【发布时间】:2013-09-06 13:25:53
【问题描述】:

当使用 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>

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

【问题讨论】:

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


    【解决方案1】:

    您是否尝试过刷新其内容?

    $(".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"吗?

    【讨论】:

    • 谢谢,heightStyle 可以。刷新是递归。
    • 我都提到了以防万一。
    猜你喜欢
    • 1970-01-01
    • 2011-12-23
    • 2013-10-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-25
    相关资源
    最近更新 更多