Question

我有一个jquery对话框，其中包含一个jquery手风琴。当我单击手风琴标题以展开不同的部分时，手风琴上方的元素会在动画持续时间内丢失其填充。结果是这些元素在动画持续时间内向左移动。以下是相关的HTML / JS代码段。

有什么想法吗？

HTML：

<div id="bodyDiv">
    <!-- Dialog -->
    <div id="patientPopup" title="Patient:" class="ui-widget">
        <table style="width: 100%">
            <tr>
                <td class="AppointmentImage">
                    <img src="images/John-Petrucci-tn.jpg" alt="Patient Photo">
                </td>
                <td>
                    <b>Name:</b>&nbsp;Smith,&nbsp;Sally <b>DOB:</b>&nbsp;02/15/1984 <br />
                    <b>SSN:</b> 999-99-9999 <b>Address:</b> 123 Main St Nashville, TN 37204
                </td>
            </tr>
            <tr>
                <td colspan="2" style="width: 100%">
                    <!--Accordion-->
                    <div id="patientSummary">
                        <h3><a href="#">Encounters</a></h3>
                        <div>
                            <table class="PatientSummary">
                                <tr>
                                    <th>12/03/2011</th>
                                    <td>
                                        Office visit - this is text for the office visit.  some notes perhaps.
                                    </td>
                                </tr>
                                <tr>
                                    <th>10/16/2011</th>
                                    <td>
                                        GYN visit - this is text to fill some space.
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <h3><a href="#">Alerts</a></h3>
                        <div>
                            <ul>
                                <li>Diabetic</li>
                                <li>Due for FluShot</li>
                            </ul>
                        </div>
                        <h3><a href="#">Labs/Radiology</a></h3>
                        <div>
                            <table style="vertical-align: text-top;">
                                <tr>
                                    <th>Date</th>
                                    <th>Lab</th>
                                    <th>Result</th>
                                </tr>
                                <tr>
                                    <td>12/03/2011</td>
                                    <td>Blood Panel</td>
                                    <td>N</td>
                                </tr>
                                <tr>
                                    <td>12/03/2011</td>
                                    <td>Pregnancy Test</td>
                                    <td>Y</td>
                                </tr>
                                <tr>
                                    <td>12/03/2011</td>
                                    <td>Blood Panel</td>
                                    <td>N</td>
                                </tr>
                                <tr>
                                    <td>12/03/2011</td>
                                    <td>Pregnancy Test</td>
                                    <td>Y</td>
                                </tr>
                                <tr>
                                    <td>12/03/2011</td>
                                    <td>Blood Panel</td>
                                    <td>N</td>
                                </tr>
                                <tr>
                                    <td>12/03/2011</td>
                                    <td>Pregnancy Test</td>
                                    <td>Y</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <button id="showPatient">Show Patient</button>
</div>

JavaScript的：

$("#patientPopup").dialog({
        autoOpen: false,
        modal: true,
        height: 530,
        width: 600,
        draggable: false,
        resizable: false,
        open: function () {
            $("#patientSummary").accordion({
                fillSpace: true,
                autoHeight: true
            });
        }
    });

    $("#showPatient").button().click(
        function () {
            $("#patientPopup").dialog("open");
        }
    );

任何帮助将不胜感激。谢谢！

Answer 1

解决方案非常简单。我最终将图像和文本放在一个完全独立的表中，而不是手风琴。

从未明确确定为什么顶级元素会失去填充......但

JQuery手风琴上面的元素丢失填充

1 个答案: