使用jquery扩展/减少表单处理

我有一个带有文本区、输入文本和输入收音机的评论表单。首先，您将看到文本区域。如果单击它，整个表单将展开。当您在表单外部单击且字段没有值时，表单应再次缩小为文本区域。这同样有效

问题是，当您在表单中从一个字段切换到另一个字段时，表单会一次又一次地缩小和扩展。

if（$this.not（“：focus”）

不会有帮助。
有什么想法吗

HTML

---

问题在于，当您在输入/文本区域之间切换时，新的聚焦元素会触发

focus（）

，最后一个元素会触发

blur（）

$expandBox

因此被要求

slideUp（）

和

slideDown（）

要解决此问题，您必须告诉这些动画在调用之前的动画时停止它们。这样，将调用

slideUp（）

，并立即被

slideDown（）

停止

用这个

$("#commentBox").find("input,textarea").each(function() {
    var $this = $(this);
    var $expandBox = $this.parents("#commentBox").find(".expandBox");

    $this.focus(function() { 
            $expandBox.stop().slideDown(250);
    });

    $this.blur(function() {
            if ($this.val() === "" && $this.not(":focus")) {
                    $expandBox.stop().slideUp(250);
            }
    });
});

---

我相信您只需要在focus事件中调用

stop（）

。

$("#commentBox").find("input,textarea").each(function() {
    var $this = $(this);
    var $expandBox = $this.parents("#commentBox").find(".expandBox");

    $this.focus(function() { 
            $expandBox.slideDown(250);
    });

    $this.blur(function() {
            if ($this.val() === "" && $this.not(":focus")) {
                    $expandBox.slideUp(250);
            }
    });
});

$("#commentBox").find("input,textarea").each(function() {
    var $this = $(this);
    var $expandBox = $this.parents("#commentBox").find(".expandBox");

    $this.focus(function() { 
            $expandBox.stop().slideDown(250);
    });

    $this.blur(function() {
            if ($this.val() === "" && $this.not(":focus")) {
                    $expandBox.stop().slideUp(250);
            }
    });
});