根据复选框值切换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

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

这是真的，因为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>