使用 jquery 进行表单扩展/缩小处理

Question

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

问题是，当您在表单内从一个字段切换到另一个字段时，表单会缩小并扩展，如此反复。 if ($this.not(":focus")) 不会有帮助。
有什么想法吗？

HTML

<div id="commentBox">
    <form action="...">
        <label for="comment">Write a comment...</label>
        <textarea id="comment"></textarea>

        <div class="expandBox" style="display: none">
            <label for="title">Title</label>
            <input type="text" id="title" />
            <br />
            <label for="email">E-Mail *</label>
            <input type="text" id="email" />
            <br />
            <label for="name">Newsletter</label>
            <input type="radio" id="yes" name="newsletter" /><label for="yes">ja</label>
            <input type="radio" id="no" name="newsletter" /><label for="no">nein</label>
            <br />
            <label for="name">Name *</label>
            <input type="text" id="name" />
            <br />
            <input type="submit" value="senden" />
        </div>

    </form>
</div>

jQuery 片段（当然在 domready 中）

$("#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);
            }
    });
});

Answer 1

问题是，当您在输入/文本区域之间切换时，新的焦点元素会触发 focus() ，而最后一个元素会触发 blur() 。

因此，要求 $expandBox 执行 slideUp() 和 slideDown()。

要解决此问题，您必须告诉这些动画在调用之前的动画时停止它们。这样，slideUp() 将被调用，并立即被 slideDown() 停止。

为此，请使用 stop() 。

$("#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);
            }
    });
});