2

我在实现 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 而是执行手风琴方法，它会以正确的高度完美显示它。

链接到图像以查看它的外观（注意：每个 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>
4

1 回答 1

2

试试这个

$.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");
            }
        });
于 2013-07-15T11:09:06.767 回答