javascript - jQuery 滑入滑出

Question

我有一个表格，允许客户指定他们在一周内的可用性，我希望它显示一周中的所有日子，当您选中每一天旁边的框时，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。

谢谢

Answer 1

jsBin demo

jQuery(function( $ ) {

  // Spare your fingers, you can now use freely the $ alias.

  $('#mondaydiv').slideUp('fast');

  $('#mondaycheck').click(function() {
      $('#mondaydiv').slideToggle( !this.checked );
  }); 

});