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

【问题标题】：Toggle div depending on checkbox value - with animation根据复选框值切换 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)，反之亦然。动画效果放在哪里？

【问题讨论】：

toggle -> slideToggle()
很高兴有人编辑了这个问题，然后投了反对票，因为它表明缺乏研究或不清楚！这是一个什么样的论坛？ “我在这里遗漏了一些明显的东西”这句话显然就在他们的头上！
感谢 Rory，但 slideToggle 无法按预期工作。它忽略复选框状态。虽然当您单击复选框时切换起作用，但当页面加载时会显示 div，我需要将其隐藏并且仅在选中复选框时才显示 - 这是加载时传递给页面的可选参数。
你说得对，slideToggle 不太适合这种方式。我已经通过一个涵盖您的用例的示例为您添加了答案。

标签： javascript php html jquery css

【解决方案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>

【讨论】：