Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Desculpem pelo titulo errado, Exibir e esconder a div.
Boa tarde! estou cirando um catálogo online http://catalogo.reidoaluminio.com.br
e nele eu quero mostrar só a foto do produto e um botão escrito informações, fiz pra abrir as informações dos produtos quando passa o mouse em cima da box do produto, usei mouseover e mouseout, ate então seria assim que eu queria, acho bacana dessa forma, só que com o andamento da coisa me apareceu um problema, nas informações do produto eu preciso inserir uma tabela com tamanhos e litragem, e essa tabela vai ser maior que a div que exibe as informações assim vou ter que usar um iframe pra tabela pra que a pessoa role a mesma.
o problema e que da forma que eu fiz não tem como a pessoa interagir com as informações! porque, quando ela tira o mouse da div box, as informações fecham.
eu fiquei um tempo parado com desenvolvimento e não sei como não estou conseguindo fazer algo que pra mim já foi muito simples um dia, mais esqueci!
quero que a pessoa clique ou na foto ou no botão de informações, ai a div de informações fica aberta da forma que der pra pessoa clicar em cima e etc, e no topo da div de informações colocar uma outra div como um (x) pra que a pessoa só feche ela quando quiser, e também não deixar abrir mais de uma div de informações, se abrir outra a que estava aberta fecha.
por incrível que pareça, estou apanhando pra fazer isso.
eu preciso que quando clica ele mostre so a div informações da qual eu cliquei! alguma dica? assim ate funciona, mais ele dispara todas as divs.
>
tem uma ferramenta com jQuery que estudei a pouco segue o link: http://www.w3schools.com/jquery/jquery_hide_show.asp
assim você pode criar uma div que apareça só quando um botão for clicado!
$("identifica o botão").click(function{
$("identifica a div").show();
});
mas para tal tem que saber um pouco de jQuery
Pedro,
Realmente o evento onClick é necessário, mas nesse caso ele vai precisar de um each para identificação das divs e seus botões. Se você colocar só o evento click puro, vai precisar chamar div por div até cansar. (Dá pra fazer um for que adicione um número ao final da classe ou id de cada um, mas já viu o trampo né?) huahsuhaushuahsuhaus
---------------------------------------------------------------------------
Guilomaker,
Bem, você disse que já desenvolveu por um tempo, mas agora está parado. Você lembra de ter visto o conceito de tabs? Bem, pra div é quase a mesma coisa.
Eu preparei um modelo no JSFiddle pra você estudar o código e implantar no seu.
Boa sorte e bons estudos!
>
Pedro,
Realmente o evento onClick é necessário, mas nesse caso ele vai precisar de um each para identificação das divs e seus botões. Se você colocar só o evento click puro, vai precisar chamar div por div até cansar. (Dá pra fazer um for que adicione um número ao final da classe ou id de cada um, mas já viu o trampo né?) huahsuhaushuahsuhaus
---------------------------------------------------------------------------
Guilomaker,
Bem, você disse que já desenvolveu por um tempo, mas agora está parado. Você lembra de ter visto o conceito de tabs? Bem, pra div é quase a mesma coisa.
Eu preparei um modelo no JSFiddle pra você estudar o código e implantar no seu.
Boa sorte e bons estudos!
não e exatamente isso que eu quero, tipo! todos produtos utilizam uma mesma classe "produtos-box" essa e a classe de todas as box dos produtos, o problema que quando clico ela dispara todas, preciso que ela mostre so a que estou clicando e mantenha as outras fechadas.
se vc entrar ai no link e passar o mouse em cima de um produto, vc vai ver que uma outra box aparece, eu preciso que ela continue aparecendo dessa mesma forma, só que mudar o modo de disparo, a pessoa clica e abre, e quando ela quiser ela fecha.
você vai ter que navegar no DOM, usando THIS. Estava com o mesmo problemas esses dias, um amigo respondeu neste mesmo fórum com este link, li, entendi e consegui resolver. Espero que ajude :)
http://wbruno.com.br/jquery/navegando-no-dom-jquery/
Aqui um exemplo: https://jsfiddle.net/jonathanrn/k02974f4/1/
Amo esse fórum! pessoal aqui ajuda a adquirir conteúdo! :rolleyes:
quanto ao problema muito boa a solução através da navegação DOM.
assim só perecisa colocar a descrição logo após o botão e vualá! :D
e com o $().siblings() você evita que abra mais de uma ao mesmo tempo! muito bom! muito bom msm!
quanto a minha solução um pouco asna!...mas eu usaria conteúdo dinâmico com php ai n teria trabalho definir id para cada botão e descrição e tal!
conseguir fazer da forma que eu queria
https://catalogo.reidoaluminio.com.br/
só o primeiro produto que já está funcionando.
só que eu não consigo fechar kkkkk tudo foi da forma mais fácil
$(document).ready(function(){
$(".produtos-box").click(function(){
$(this).children(".produtos-box-info").show();
});
$(".fechar").click(function(){
$(this).children(".produtos-box-info").hide();
});
});Vou dar uma estudada nessa navegação DOM!
usa Toggle no lugar de show e elimina esse fechar. O toggle funciona assim, quando você clika ele mostra e se clikar de novo ele fecha!
Navegação DOM resolve perfeitamente o que vc precisa!
tem uma ferramenta com jQuery que estudei a pouco segue o link: http://www.w3schools.com/jquery/jquery_hide_show.asp
assim vc pode criar uma div que apareça só quando um botão for clicado!
$("identifica o botão").click(function{
$("identifica a div").show();
});
mas para tal tem que saber um pouco de jQuery