切换div取决于复选框值-带有动画
切换div取决于复选框值-带有动画
提问于 2020-12-11 10:33:51
我有一个复选框，当单击该复选框时，会使用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)，反之亦然。我把动画效果放在哪里？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-11 16:21:33
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65249652
复制相关文章
相似问题
腾讯云开发者
