Question

我正在尝试滑动切换表格中的文本框和标签。，幻灯片切换工作正常，但单击复选框时效果不顺畅，文本框和标签以奇怪的方式显示，它从右侧切换，然后在字段之间留下间隙，每次间隙增加单击复选框。以下是代码：

<script type="text/javascript">

$(document).ready(function () {
    var $startdates = $('#startDates');
    var $endDates = $('#endDates');
    $startdates.hide();
    $endDates.hide();

    $('#all').click(function () {
        $startdates.slideToggle('slow');
        $endDates.slideToggle('slow');
        return false;

    });
});
 </script>


<tr id="startDates">
        <td>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.StartDate) %>
        </div>
        </td>
        <td>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.StartDate) %>
            <%: Html.ValidationMessageFor(model => model.StartDate) %>
        </div>
        </td>
        </tr>

        <tr id="endDates">
        <td>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.EndDate) %>
        </div>
        </td>
        <td>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.EndDate) %>
            <%: Html.ValidationMessageFor(model => model.EndDate) %>
        </div>
        </td>
        </tr><tr></td>
        <td><input type="checkbox" name="All" id="all" /><label>All</label></td>
        </tr>

Answer 1

使用CSS或javascript为.editor-label和.editor-field提供高度。

如果没有设置高度，则animate函数将无法正常运行，因为jQuery必须猜测高度正在扩展/动画化为。

Answer 2

不建议切换tr和td元素，特别是如果你使用效果（不要对tr使用效果！）

尝试此操作以显示您的元素：

.slideToggle()替换.show()，或.css('display', 'table-row')

使用jquery隐藏/取消隐藏会导致奇怪的效果

2 个答案: