Tenho o seguinte código aqui: http://jsfiddle.net/felipestoker/SL2EP/3/
Quando eu clico em homeListagemLiBt
ele mostra a div buscaAvanHoverDiv
, até aí perfeito! Só que eu vou ter 20 elementos iguais, então, sempre que clico na homeListagemLiBt
ele mostra todos os buscaAvanHoverDiv
da página. Teria que criar um número de ID + classe para isso dar certo?
O código é mostrado abaixo:
HTML:
<li class="homeListagemLi">
<div class="homeListagemDiv">
<ul>
<li>
<img src="./imagens/pessoa.jpg" height="220" width="220" />
</li>
<li><strong>teste</strong>
</li>
<li><span>Cargo: Redação</span>
</li>
<li><span>Status: Não definido</span>
</li>
<li>
<p>Inscrição: 10/05/2014</p>
</li>
<li>
<p>Última atualização: 10/08/2014</p>
</li>
<li>
<p>Escolaridade: Superir Completo</p>
</li>
<li class="homeListagemLiBt"></li>
<li class="p-relative">
<div class="buscaAvanHoverDiv">
<ul>
<li><span>Salário: R$ 1.000,00</span>
</li>
<li><span>Experiência: haha</span>
</li>
<li class="clear"></li>
<li>
<p>Estado civil: Solteiro(a)</p>
</li>
<li>
<p>Idiomas: Inglês (intermediário)</p>
</li>
<li>
<p>Facebook: fbfbfbf</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="homeListagemLi">
<div class="homeListagemDiv">
<ul>
<li>
<img src="./imagens/pessoa.jpg" height="220" width="220" />
</li>
<li><strong>teste</strong>
</li>
<li><span>Cargo: Redação</span>
</li>
<li><span>Status: Não definido</span>
</li>
<li>
<p>Inscrição: 10/05/2014</p>
</li>
<li>
<p>Última atualização: 10/08/2014</p>
</li>
<li>
<p>Escolaridade: Superir Completo</p>
</li>
<li class="homeListagemLiBt"></li>
<li class="p-relative">
<div class="buscaAvanHoverDiv">
<ul>
<li><span>Salário: R$ 1.000,00</span>
</li>
<li><span>Experiência: haha</span>
</li>
<li class="clear"></li>
<li>
<p>Estado civil: Solteiro(a)</p>
</li>
<li>
<p>Idiomas: Inglês (intermediário)</p>
</li>
<li>
<p>Facebook: fbfbfbf</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
Javascript:
$(".homeListagemLiBt").click(function () {
$('.buscaAvanHoverDiv').slideDown();
});
CSS:
.homeListagemLi{
width: 284px;
height: 432px;
float: left;
margin-right: 30px;
background-color: white;
margin-bottom: 30px;
position: relative;
}
.homeListagemDiv{
width: 220px;
padding-top: 30px;
padding-left: 30px;
height: 380px;
}
.homeListagemDiv>ul>li>img{width: 220px;height: 220px;}
.homeListagemDiv>ul>li>strong{color: #00aeef;font-size: 15px;font-family: "open_sansbold";
}
.homeListagemDiv>ul>li>span{color: #414042;font-size: 13px;font-family: "open_sansbold";
}
.homeListagemDiv>ul>li>p{
color: #808285;
font-size: 13px;
font-family: "open_sanssemibold";
margin-bottom: 3px;
}
.buscaFundoTotalPessoa{
background-color: #f2f5f6;
width: 1330px;
height: 1095px;
margin: auto;
}
.homeListagemLiBt{
width: 32px;
height: 32px;
bottom: 0;
right: 0;
position: absolute;
background-color: #e6e7e8;
background-image: url('../imagens/flechaBaixoCinza.jpg');
background-repeat: no-repeat;
background-position: center center;
cursor: pointer;
}
/*.homeListagemLiBt:hover .buscaAvanHoverDiv{
display: block;
}*/
.buscaAvanHoverDiv {
background-color: #e6e7e8;
height: 165px;
left: -31px;
position: absolute;
top: 41px;
width: 285px;
z-index: 2;
display: none;
}
.buscaAvanHoverDiv ul{
padding-left: 30px;
padding-top: 30px;
}
.buscaAvanHoverDiv ul>li>span{
font-family: 'open_sansbold';
font-size: 13px;
color: #414042;
}
.buscaAvanHoverDiv ul>li>p{
font-family: 'open_sanssemibold';
font-size: 13px;
color: #808285;
margin-bottom: 3px;
}
.buscaPaginacao{width: 144px;float: right;margin-right: 50px;}
.buscaPaginacao li{
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
font-family: 'open_sansbold';
font-size: 18px;
color: #58595b;
background-color: white;
float: left;
margin-right: 4px;
cursor: pointer;
}
.buscaPaginacaoFlecha{
background-image: url("../imagens/paginacaoDir.png");
background-repeat: no-repeat;
background-position: center 10px;
width:9px;
height: 24px;
}
.buscaPaginacaoFlecha:hover{
background-position: center -2px;
}
.buscaPaginacao li:hover {background-color: #58595b;color: white;}
$(this).next().find('.buscaAvanHoverDiv').slideDown();