如果您希望新表单滑入,则需要使用.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>