jquery - 如何在焦点输入的同一父级中滑动类

Question

我想在焦点输入所在的相同 .field 类中选择.input-addition 类。

我尝试了类似以下的方法，但根本不起作用。

HTML5

<div class="field">
    <input type="email" id="emailConfirm" name="emailConfirm" maxlength="254" autocomplete="off">
    <span class="input-addition">↳ Re-enter your email to make sure it's correct.</span>
</div>

jQuery

$(function() {
    $("#signup input").focus(function() {
        $(this).closest('.input-addition').slideDown("fast").css('display', 'block');
    })
});

Answer 1

我建议:

$('input').on('focus blur', function(e){
    $(this).siblings('.input-addition')[e.type === 'focus' ? 'slideDown' : 'slideUp']();
});

JS Fiddle demo .

如果 input 获得焦点，则此方法向下滑动同级 .input-addition，而当 input 获得焦点时，则将其滑开 是模糊的。

How would I set it to slide up and down fast in your code?

只需将持续时间传递给方法即可:

$('input').on('focus blur', function(e){
    $(this).siblings('.input-addition')[e.type === 'focus' ? 'slideDown' : 'slideUp']('fast');
});

引用文献:

• on() .
• siblings() .
• slideDown() .
• slideUp() .