根据复选框值切换 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($ => {&nbsp; let $toggle =$('#toggle1').change(e => {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('#details1')[e.target.checked ? 'slideDown' : 'slideUp']();&nbsp; })&nbsp;&nbsp;&nbsp; if ($toggle.is(':checked'))&nbsp; &nbsp; $('#details1').show();});#details1 {&nbsp; 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>