Question

我正在构建一个表单，当您单击另一个是/否输入时，我需要显示或消失一些元素。我需要一些样式帮助。

看到这个JS小提琴：http://jsfiddle.net/TdnZp/11/

技术上的一切都以我想要的方式运作。注意单击是/否时，另一个表单元素显示或隐藏，元素占用的空间消失。这很好，但是我还需要输入框和标签在上下都很漂亮的列中，而不是像现在这样交错。

当新元素进入时，我希望它下面的所有元素能够平滑地向下滑动以腾出空间而不是瞬间跳跃，同样的元素消失时，较低的元素顺利滑动以填充。

有谁知道如何做这两件事？如果我应该使用<ul>以外的其他HTML元素，请告诉我。

谢谢！

Answer 1

您可以通过设置标签宽度来实现所需的间距，您可以使用slideDown而不是fadeIn来实现所需的幻灯片效果。

Answer 2

如果您希望新表单滑入，则需要使用.slideUp和.slideDown动画。

DEMO

见下文，

$('[name="label"]').change(function(){
    if ($('[name="label"]:checked').val() == "yes"){
        $('#bl').slideDown('slow');
    }else{
        $('#bl').slideUp('slow');
    }
});

编辑：您需要修改标记和css以进行对齐和样式设置。请参阅以下代码并根据需要进行修改..

DEMO

<强> CSS：

#list li { padding: 2px; }
#list input { margin: 1px; }
div.form-label { display: inline-block; width: 100px; font-weight: bold;}

<强> HTML：

<form>
    <ul id="list">
        <li>
            <div class="form-label">
                <label for="label">Label:</label>
            </div>
            <input type="radio" name="label" value="yes" />Yes
            <input type="radio" name="label" value="no" />No
        </li>
        <li id="bl">
            <div class="form-label">
                <label for="label_cost">Cost:</label>
            </div>
            <input name="label_cost" />
        </li>
        <li>
            <div class="form-label">
                <label for="another_one">Another One:</label>
            </div>
            <input name="another_one" />
        </li>
    </ul>
</form>

使用<ul>表示动态表格</ul>

2 个答案: