Question

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

我尝试了类似下面的内容，但根本不起作用。

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-addition聚焦，此方法会向向下兄弟input，并在input模糊时将其滑开。

如何将其设置为在代码中快速上下滑动？

只需将duration传递给方法：

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

参考文献：

Answer 2

.input-addition不是您输入的父母，它是兄弟姐妹：

$(this).siblings('.input-addition').slideDown("fast");
//or
$(this).next('.input-addition').slideDown("fast");

我会使用兄弟，因为如果你在输入和sapn之间插入一些东西，接下来就行不通了。

如果您想要更改校样代码，请使用：

$(this).closest('.field').find('.input-addition').slideDown("fast");

如何在焦点输入的同一父级中slideDown类

2 个答案: