根据复选框值切换 div - 带动画

Question

我有一个复选框，单击该复选框时使用 jQuery 函数显示/隐藏 div 的内容。我需要 div 向下滑动（扩大屏幕）而不是仅仅出现。jQuery：<script>$(function () {    $('#toggle1').change(function () {                        $('#details1').toggle(this.checked);    }).change(); //ensure visible state matches state of checkbox on page load    });</script>如果选中复选框 (toggle1)，则显示 div (details1)，反之亦然。动画效果放在哪里？

Answer 1

SlideToggle 无法按预期工作。它忽略复选框状态

确实如此，因为slideToggle()令人烦恼的是，它不以同样的方式接受布尔值toggle()。因此，您需要检查复选框的状态并单独使用slideDown()和。slideUp()

当页面加载时，会显示 div，我需要将其隐藏，并且仅在选中复选框时才显示

在这种情况下，使用 CSS 隐藏加载时的元素，因为它不需要像 JS 那样首先加载页面。如果您想在加载时显示内容而不使用幻灯片动画，请使用show().

这是一个完整的工作示例：

jQuery($ => {

  let $toggle =$('#toggle1').change(e => {    

    $('#details1')[e.target.checked ? 'slideDown' : 'slideUp']();

  })

  

  if ($toggle.is(':checked'))

    $('#details1').show();

});

#details1 {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="toggle1" checked />

<div id="details1">Lorem ipsum dolor sit consectetur adipiscing elit</div>