如何在slideUp与slideDown时添加CSS类？代码优化咨询

嘿，我来帮你搞定这个需求！你的代码目前存在几个小问题：addClass()没指定具体类名、缺少slideDown的切换逻辑，而且重复绑定了点击事件。下面是完善后的解决方案，能完美实现你要的效果：

完整代码示例 #

首先是基础的HTML结构（适配你的需求场景）：

<button id="hide_top">切换表单显示</button>
<div id="formdate">
  <!-- 这里是你的表单内容 -->
  <input type="date" placeholder="选择日期">
</div>

<!-- 先引入jQuery，注意要放在自定义脚本之前 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // 只绑定一次点击事件就够啦
  $("#hide_top").click(function() {
    // 缓存jQuery对象，避免重复查询DOM，提升性能
    const $btn = $(this);
    const $form = $("#formdate");
    
    // 判断表单当前是否可见，自动切换动画逻辑
    if ($form.is(":visible")) {
      // 执行slideUp前，给按钮添加对应状态类，同时移除对立类
      $btn.addClass("slide-up-active").removeClass("slide-down-active");
      // 执行slideUp动画，可选：添加动画完成后的回调逻辑
      $form.slideUp(300, function() {
        console.log("表单已收起");
      });
    } else {
      // 执行slideDown前，给按钮添加对应状态类，移除对立类
      $btn.addClass("slide-down-active").removeClass("slide-up-active");
      // 执行slideDown动画
      $form.slideDown(300, function() {
        console.log("表单已展开");
      });
    }
  });
});
</script>

对应的CSS样式示例 #

你可以根据需求自定义两个状态类的样式：

/* slideUp操作时按钮的样式 */
.slide-up-active {
  background-color: #ffeeee;
  border-color: #ff6b6b;
  color: #d63031;
}

/* slideDown操作时按钮的样式 */
.slide-down-active {
  background-color: #eeffee;
  border-color: #51cf66;
  color: #2b9348;
}

关键修复与优化说明 #

• 补全类名：给addClass()传入了具体的状态类名，解决原代码无有效类名的问题
• 状态切换逻辑：用:visible选择器判断元素当前可见状态，自动触发对应的slideUp/slideDown操作
• 类的互斥处理：每次切换时移除对立状态的类，避免两个类同时存在导致样式冲突
• DOM缓存：把频繁使用的jQuery对象存入变量，减少DOM查询次数，提升代码执行效率
• 可选回调：动画完成后的回调函数，方便你在动画结束后执行额外的业务逻辑

内容的提问来源于stack exchange，提问作者Abdulhadi Afghan