1

isto é praticável? Ou possuem alguma sugestão sem plugins jQuery UI?

HTML CODE:

<div class="minhaclasse">
<p class="titulo">Título<br>resumo<br></p>
<p class="outros"> texto de descrição </p>
</div>
<div class="minhaclasse">
<p class="titulo">Título<br>resumo<br></p>
<p class="outros"> texto de descrição </p>
</div>

CSS CODE:

p.titulo{ cursor: pointer}
p.outros{display:none}

jQuery Code:

$(document).ready(function(){
    $(".titulo").mouseover(function(){
        $(this).siblings(".outros").css("display", "block");
    });
});

1 Resposta 1

1

Sim é possível.

Eu faria assim:

$(document).ready(function () {
    $(".titulo").hover(function () {
        $(this).next().toggleClass("outros");
    }, function () {
        $(this).next().toggleClass("outros");
    });
});

CSS

p.titulo {
    cursor: pointer
}
.outros {
    display:none
}

Exemplo

Usando o .hover() é possível ter uma função para quando o mouse está hover e quando saiu. Usanto o .next() pode selecionar-se somente o proximo sibling


Para usar o efeito acordeão mais tradicional pode usar assim:

$(document).ready(function () {
    $(".titulo").on('click', function () {
        var descricao = $(this).next(); // por o elemento onde está a descrição em cache
        $(".outros").not(descricao).slideUp(); // esconder todos os que possam estar abertos menos o que está junto ao que recebeu clique
        descricao.slideToggle();  // abrir ou fechar consoante estiver aberto ou fechado
    });
});

Exemplo

6
  • Hum, mas eu não gostaria de adicionar ou remover a classe. Apenas mostrar/não mostrar. Na minha aplicação, eu preciso manter a classe. 28/03/2014 às 20:00
  • 1
    @MarceloAymone, assim: jsfiddle.net/n9SNr ?
    – Sergio
    28/03/2014 às 20:00
  • 1
    desta forma ficou perfeito. 28/03/2014 às 20:02
  • @MarceloAymone, óptimo. Juntei essa opção à resposta.
    – Sergio
    28/03/2014 às 20:03
  • Muito obrigado... 28/03/2014 às 20:04

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 .