Javascript Can'；不要强迫集中精力于输入

在单击

span

后，我试图聚焦

输入，该
输入不可见，但当我单击
span
时，它变为可见

<form action="{{ route('busca') }}" method="get">
    <span class="pesquisa-icon"></span>
    <input id="q" type="text" name="q" placeholder="Digite o que precisa e pressione ENTER..."/>
</form>

但它并没有成为焦点，甚至在浏览器中，我在浏览器控制台（输入可见）中尝试了
$（'#q'）.focus（）
，但它没有焦点

我正在使用Opera浏览器

解决方案

我选择Sebastian Speitel answer作为正确答案，因为它很有用，但我的问题实际上是css，我的输入是属性
visibility:hidden
，甚至我在点击
span
后更改为
visibility:visible
，它没有聚焦，删除此属性解决了我的问题
它只使用
.focus（）
工作

请参阅此演示：


$（'.pesquisa图标'）。在（'click'，function（）上{
$（this）.next（）.addClass（'show'）.focus（）；
});
#q{
显示：无；
}
#q、 显示{
显示：内联块；
}

试验
它只使用
.focus（）
工作

请参阅此演示：


$（'.pesquisa图标'）。在（'click'，function（）上{
$（this）.next（）.addClass（'show'）.focus（）；
});
#q{
显示：无；
}
#q、 显示{
显示：内联块；
}

试验
我认为您试图实现的是相同的功能，
s用于。您只需将
和
封装在一个中即可实现一个

请在此处阅读更多关于它们的信息：
我认为您试图实现的是相同的功能，
s用于。您只需将
和
封装在一个中即可实现一个

请在此处阅读更多关于它们的信息：

$(this).closest('.menu').addClass('pesquisa-open');
$(this).siblings('input').focus();