1

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;}
4
  • Seu fiddle não funciona e seu HTML é inválido.
    – Beterraba
    24/07/2014 às 14:14
  • Editei novamente, ele estava no OnLoad, hehe. Não tá 100%, mas dá para ter uma ideia. 24/07/2014 às 14:18
  • 1
    Já testou assim? $(this).next().find('.buscaAvanHoverDiv').slideDown();
    – Sergio
    24/07/2014 às 14:19
  • 1
    @Sergio, funcionou, muito obrigado! 24/07/2014 às 14:21

2 Respostas 2

2

Uma vez que quer fazer slideDown de um elemento descendente do proximo sibling, como este pedaço de HTML:

<li class="homeListagemLiBt"></li>
<li class="p-relative">
      <div class="buscaAvanHoverDiv">

então, pode usar assim com jQuery:

$(".homeListagemLiBt").click(function () {
    $(this).next().find('.buscaAvanHoverDiv').slideDown();
});
2

Além de confiar em ids ou classes numeradas, você pode também se valer da própria estrutura do HTML:

$(this).siblings('li.p-relative').children('div.buscaAvanHoverDiv').slideDown();

Essa cadeia de comandos faz o seguinte:

  • $(this) → Encontra o elemento que disparou o evento

  • siblings('li.p-relative') → busca as tags no mesmo nível da tag atual, filtra apenas as que são li e possuem a classe p-relative.

  • children('div.buscaAvanHoverDiv')→ busca filhas dessa classe do tipo div que possuam a classe buscaAvanHoverDiv.

Claro que você não precisa necessariamente tipar tão fortamente (só as classes já seriam o suficiente, mas eu gosto de criar seletores usando boas práticas CSS). Se a tag a ser animada sempre for a próxima após a atual você pode usar o método next conforme sugestão do Sergio. Caso a div possa ser uma descendente indireta do li (uma neta, bisneta, etc - que não é o caso do exemplo), substitua o método children por find.

JSFiddle

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 .