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 回答