jQuery实现点击切换元素上下滑动显示隐藏功能的代码问题咨询

• 滑动功能逻辑颠倒：检测到.searchform隐藏时调用了用于隐藏元素的slideUp()方法，检测到元素可见时调用了用于展示元素的slideDown()方法，和预期的切换效果完全相反。
• 条件判断逻辑错误：两个判断是独立的if语句，未使用else分支，第一个if执行后如果修改了元素可见性，第二个if会立刻触发，导致两个动画连续执行，最终看不到正确效果。
• 多余的display属性操作存在错误：slideUp()/slideDown()本身会自动控制元素的display属性实现动画过渡，手动设置display会直接打断动画；同时你使用的display: hidden是无效属性，display属性没有hidden取值，该值属于visibility属性的可选配置。

你可以用分支判断写法修复：

jQuery(document).ready(function($) {
    $(".ddd").click(function () {
        if ($(".searchform").is(":hidden")) {
            // 隐藏状态下滑出显示
            $(".searchform").slideDown(1000);
        } else {
            // 显示状态下滑入隐藏
            $(".searchform").slideUp(1000);
        }
    });
});

也可以直接使用jQuery内置的slideToggle()方法简化代码，不需要手动判断元素可见性：

jQuery(document).ready(function($) {
    $(".ddd").click(function () {
        $(".searchform").slideToggle(1000);
    });
});

内容的提问来源于stack exchange，提问作者attack-to-overflow