1

Estou estilizando um 'input/campo de pesquisa' utilizando o onclick do javascript, consigo fazer 50% mas o restante estou quebrando a cabeça e não sei oque fazer.

Consegui fazer com que a caixa de entrada de texto para fazer a pesquisa apareça apenas quando clico no botão.

Mas preciso que ao clicar novamente no botão ou em qualquer outro canto da tela que não fosse no campo de pesquisa, automaticamente o campo de pesquisa se escondesse novamente, fizesse o mesmo efeito de exibir, porém ao contrário.

Caixa de busca ex:

Escondido

Exibindo quando clicado!

Estado final quando clicado!

Código:

$('#imagembusca').click( function() {
  $("#busca").attr('style', 'width: 200px; transition: all 0.5s linear; border-radius: 0 20px 20px 0; padding:0 10px 0 30px;');
});
#btbusca{
	max-width:250px;
	height: 30px;
	padding: 0;
}
#imagembusca{
	background:#FF0004;
	color: #FFFFFF;
	border-radius: 20px;
	width: 15px;
	height: 15px;
	padding: 7.5px 12px;
	display: inline-block;
	position: absolute;
	z-index: 1;
}
#imagembusca:hover{
	background: #B00002;
	transition: all 0.5s linear;
}
#busca{
	background:#EEE;
	width: 0px;
	line-height:30px;
	display: inline-block;
	position: absolute;
	margin: 0 0 0 15px;
	transition: all 0.5s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btbusca">
				<img src="https://www.sccpre.cat/mypng/full/51-514569_dibujo-lupa-png-desenho-lupa-para-colorir.png" id="imagembusca" alt="buscar" />
				<input type="search" name="busca" id="busca" placeholder="Buscar">
			</div>

2 Respostas 2

2

É mais fácil criar uma classe e usar .toggleClass() no click do botão. Por exemplo, você cria uma classe e coloca as propriedades do style:

#busca.aberto{
   width: 200px;
   transition: all 0.5s linear;
   border-radius: 0 20px 20px 0;
   padding:0 10px 0 30px;
}

Cada vez que o botão for clicado irá abrir ou esconder o campo de busca.

E para esconder o campo ao clicar em qualquer lugar da tela, você usa o código abaixo para remover a classe do campo:

$(document).click(function(){
   $("#busca").removeClass('aberto');
});

Mas é preciso usar event.stopPropagation() no botão para não chamar o evento do $(document):

$('#btbusca').click( function(e) {
   e.stopPropagation();
});

Irá ficar desta forma:

$('#imagembusca').click(function(){
   $("#busca").toggleClass('aberto');
});

$('#btbusca').click( function(e) {
   e.stopPropagation();
});

$(document).click(function(){
   $("#busca").removeClass('aberto');
});
#btbusca{
	max-width:250px;
	height: 30px;
	padding: 0;
}
#imagembusca{
	background:#FF0004;
	color: #FFFFFF;
	border-radius: 20px;
	width: 15px;
	height: 15px;
	padding: 7.5px 12px;
	display: inline-block;
	position: absolute;
	z-index: 1;
}
#imagembusca:hover{
	background: #B00002;
	transition: all 0.5s linear;
}
#busca{
	background:#EEE;
	width: 0px;
	line-height:30px;
	display: inline-block;
	position: absolute;
	margin: 0 0 0 15px;
	transition: all 0.5s linear;
}

#busca.aberto{
   width: 200px;
   transition: all 0.5s linear;
   border-radius: 0 20px 20px 0;
   padding:0 10px 0 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btbusca">
   <img src="https://www.sccpre.cat/mypng/full/51-514569_dibujo-lupa-png-desenho-lupa-para-colorir.png" id="imagembusca" alt="buscar" />
   <input type="search" name="busca" id="busca" placeholder="Buscar">
</div>

1
  • Perfeito, exatamente oque estava precisando!
    – Arthur74
    Commented 21/10/2019 às 12:18
0

use o método Onblur! assim você pega o evento ao tirar o foco do elemento!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .