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不会展开。

P.S。我没有使用$符号，因为我一直在收到错误，所以我现在只使用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 );
  }); 

});

jQuery slide在幻灯片中

1 个答案: