0

我正在构建一个表单，当您单击另一个是/否输入时，我有一些元素需要出现或消失。我需要一些造型帮助。

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

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

另外，当新元素进来时，我希望它下面的所有元素都平滑地向下滑动以腾出空间，而不是瞬间跳下，当元素消失时也是如此，下面的元素平滑地向上滑动填充。

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

谢谢！

4

2 回答 2

3

你想要的间距可以通过设置标签的宽度来实现，你想要的滑动效果可以使用slideDown而不是fadeIn来实现。

于 2012-04-13T20:12:43.317 回答
2

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

演示

见下文，

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

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

演示

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>
于 2012-04-13T20:13:09.803 回答