Oi estou fazendo a barra de pesquisa do site e o modelo da barra e assim: tem uma imagem de uma lupa e quando clicar na imagem, embaixo dela aparece o input para digitar a pesquisa. Estou fazendo isso em JavaScript mas estou tendo problemas. Acontece assim quando eu clico aparece o input mais quando clico fora ele continua lá, como posso fazer ele desaparecer tentei usar if e else, for loops mais não consegui nada. Alguem poderia me ajudar? Obrigado!
<script>
function mostrarPesquisa(){
document.getElementById('pesquisa').style.display="inline-block";
}
</scripit>
<div id="menu">
<div id="dentromenu">
<ul class="menu">
<li class="activeItem"><a><img class="lupa" src="imagens/lupa.png" alt="Lupa" onClick="mostrarPesquisa()"></a>
<div id="caixapesquisa">
<form id="formpesquisa" action="" method="get">
<input id="pesquisa" class="pesquisa" type="text" value="" maxlength="" placeholder="Pesquisar..."><input id="btnpesquisa" type="hidden" src="imagens/lupa.png" value="">
</form>
</div>
</li>
display = "none"
?