Форма расширения / уменьшения обработки с помощью 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 (фрагмент кода)

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);
            }
    });
});