选中隐藏元素中的输入

Question

我正在开发一个场景,用户可以在隐藏元素中选择一个输入.当该输入被聚焦时,我希望它的父元素,隐藏元素,使用jQuery显示.到目前为止,我似乎无法让这个工作.

这就是我的HTML的样子:

<div class="select">
<input tabindex="1" type="text" name="search" class="address" id="address-1" placeholder="Tab to the next input.">
<div class="dropdown">
    <div class="dropdown-search">
        <input tabindex="2" type="text" name="search" class="search" id="dropdown-search-1" placeholder="Type to search...">
    </div>            
</div>

​

和jQuery:

$('.select').each(function() {
    var dropdown = $('.dropdown', this),
        search = $('.search', this);

    search.focus(function() {
        dropdown.show();
    });
});?

我也把我的代码放在这里:http://jsfiddle.net/ae26u/1/

Answer 1

解决这个问题的一个技巧是将元素隐藏在屏幕外,而不是实际隐藏在DOM中.

如果它在屏幕外隐藏,它仍然"被绘制",因此您可以将其标记到其中,然后在选项卡上将其移回屏幕.

jQuery的:

$('.select').each(function() {
    var dropdown = $('.dropdown', this),
        search = $('.address', this);

    dropdown.focus(function() {
        console.log('show');
        dropdown.css( "left", "0px" )
    });
});?

HTML:

<div class="select">
    <input tabindex="1" type="text" name="search" class="address" id="address-1" placeholder="Tab to the next input."><br />
    <input tabindex="2" type="text" name="search" class="dropdown" id="dropdown-search-1" placeholder="Type to search...">
</div> 

jsFiddle示例:http://jsfiddle.net/ae26u/7/