Question

我在实现JQuery Accordion时遇到了问题。

好的，基本上我需要/正在做的是以下内容：

使用Javascript：

$.ajax(
            {
                url:'MyServlet.jsp',
                type:"GET",
                async:true,
                dataType: "text",
                success:function(data)
                { 
                    $("#leaveRecordsTable").html(data);
                    $( "#leaveRecordsTable" ).accordion({
                          collapsible: true,
                          icons: null,
                          heightStyle: "content"
                        });
                }
            });

HTML：

<div id="leaveRecordsTable">
</div>

好的，现在发生的事情是它从我的servlet中正确获取数据，并将它完美地添加到DOM中，但由于某种原因，手风琴中每个div的高度为0，这是一个小空间我无法做到更大。

我知道它是由ajax引起并动态添加手风琴，因为如果我在“leaveRecordsTable”div中添加我自己的标题和div，而不是执行ajax但是执行accordion方法，它会完美地显示正确高度。

链接到图像以查看它的外观（注意：在每个div中的手风琴里面都有文本字段和数据，因此高度应该更大）：

<a href='http://postimg.org/image/rp6eilhvh/' target='_blank'><img src='http://s22.postimg.org/rp6eilhvh/accordion.jpg' border='0' alt="accordion" /></a>

我从servlet发送的数据：

out.println("<h3>" + "Number: " + q + "</h3>");
out.println("<div style='height:0px;'>");
out.println("<table>");
out.println("<tr>");
out.println("<td>From Date</td>");
out.println("<td><input type='text' id='from' name='from' readonly='readonly' style=' width:185px;'/></td>");
out.println("<td style='width:60px;'>To Date</td>");
out.println("<td><input type='text' id='to' name='to' readonly='readonly' style=' width:185px;'/></td>");
out.println("</tr>");
out.println("</table>");
out.println("</div>");

基本上这会被添加到“leaveRecordsTable”（其中一些标题和div）中：

<h3>Number: 1</h3>
<div>
<table>
<tr>
<td>From Date</td>
<td><input type='text' id='from' name='from' readonly='readonly' style=' width:185px;'/></td>
<td style='width:60px;'>To Date</td>
<td><input type='text' id='to' name='to' readonly='readonly' style=' width:185px;'/></td>
</tr>
</table>
</div>

Answer 1

试试这个

$.ajax(
        {
            url:'MyServlet.jsp',
            type:"GET",
            async:true,
            dataType: "text",
            success:function(data)
            { 
                $("#leaveRecordsTable").html(data);
                $( "#leaveRecordsTable" ).accordion({
                      collapsible: true,
                      icons: null,
                      heightStyle: "content"
                    });
                $("#leaveRecordsTable").accordion("refresh");
            }
        });

JQuery Accordion Ajax Height问题

1 个答案: