我有一个表格,允许客户指定他们在一周内的可用性,我希望它显示一周中的所有日子,当您选中每一天旁边的框时,div 应该向下滑动到日期下方允许人们选择他们当天有空的时间。这是星期一的 HTML:
我编写的使 div 开始隐藏的脚本(顶部)和应该响应被单击的复选框的脚本(底部)是这样的:
<div class="availability_day">
<label for="monday" class="label_day">Monday</label>
<input type="checkbox" name="availability_day" id="mondaycheck" value="monday">
</div>
<div id="mondaydiv" style="margin-top:10px;">
<span class="label_availability">Availability</span>
<input type="checkbox" name="availability_monday" id="monday_morning" value="morning">
<label for="morning">Morning</label>
<input type="checkbox" name="availability_monday" id="monday_afternoon" value="afternoon">
<label for="afternoon">Afternoon</label>
<input type="checkbox" name="availability_monday" id="monday_evening" value="evening">
<label for="evening">Evening</label>
<label for="availability_monday_comments" class="label">Comments</label>
<textarea name="availability_monday_comments" type="text" id="availability_monday_comments" rows="2" style="width:288px;"></textarea>
</div>
<script>
jQuery(document).ready(function() {
jQuery('#mondaydiv').slideUp('fast');
});
</script>
<script>
jQuery(document).ready(function() {
jQuery('#mondaycheck').click(function() {
if (jQuery(this).attr('checked')) {
jQuery('#mondaydiv').slideDown('fast');
} else {
jQuery('#mondaydiv').slideUp('fast');
}
}); // end click
}); // end function
</script>
但它只是行不通。第一个脚本运行良好并折叠所有 div,但第二个脚本不工作,勾选复选框时 div 不展开。
附言我没有使用 $ 符号,因为我不断收到错误,所以我现在只使用 jQuery。
谢谢
最佳答案
jQuery(function( $ ) {
// Spare your fingers, you can now use freely the $ alias.
$('#mondaydiv').slideUp('fast');
$('#mondaycheck').click(function() {
$('#mondaydiv').slideToggle( !this.checked );
});
});
关于javascript - jQuery 滑入滑出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24210413/