3

Tentei e não consegui. Tenho uma list do Bootstrap e preciso fazer com que ao clicar no item .active, os demais abaixo abram com o .toggle(), mas não sei fazer, está se comportando bem estranho.

<html>
<style>
    .list-widget .list-group-item { display: none; }
    .list-widget .list-group-item:active { display: block; }
</style>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#01</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#02</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>

<script>
$(document).ready(function(){
    $('.list-widget .list-group-item.active').click(function(){
        // Aqui abrir e fechar com .toggle();
        // Somente as .list-group-item da lista relacionada
    });
});
</script>
</html>

2 Respostas 2

2

Seu CSS tem um erro em :active, onde deveria ser .active. E para abrir os outros itens com .toggle você pode usar .siblings() (elementos irmãos).

É interessante ainda usar .preventDefault() para cancelar o evento do clique no link.

$(document).ready(function(){
    $('.list-widget .list-group-item.active').click(function(e){
       e.preventDefault();
       $(this).siblings().toggle(400);
    });
});
.list-widget .list-group-item { display: none; }
.list-widget .list-group-item.active { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#01</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#02</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>

Para ter o efeito tipo "sanfona", o .toogle() deve ter um valor, seja numérico em milissegundos ou "slow" ou "fast". No caso acima usei 400, que um valor intermediário entre o "slow" (600) e mais lento que o "fast" (200).

Usando .slideToggle()

O efeito fica bem melhor usando .slideToggle(). Isso porque o .toggle(), durante a animação, aumenta (ao mostrar) e reduz (ao esconder) a largura dos elementos.

Veja a diferença com .slideToggle():

$(document).ready(function(){
    $('.list-widget .list-group-item.active').click(function(e){
       e.preventDefault();
       $(this).siblings().slideToggle(400);
    });
});
.list-widget .list-group-item{ display: none; }
.list-widget .list-group-item.active { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#01</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#02</a>
    <a href="#" class="list-group-item">Item#01</a>
    <a href="#" class="list-group-item">Item#02</a>
    <a href="#" class="list-group-item">Item#03</a>
</div>

1
  • Obrigado, o efeito agradou bastante também !!!! =D
    – ElvisP
    1/02/2019 às 1:20
2

Criei um uma div com a classe "sub-itens", deixo ela oculta utilizando o método hide, até que o clique na div com a classe "active" faça o toggle no próximo elemento que no caso é a div com a classe "sub-tens", veja o resultado abaixo:

$(document).ready(function(){
    $('.sub-itens').hide();
    $('.list-widget .list-group-item.active').click(function(){
        $(this).next().toggle("slow");
    });    
});
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#01</a>
    <div class="sub-itens">
      <a href="#" class="list-group-item">Item#01</a>
      <a href="#" class="list-group-item">Item#02</a>
      <a href="#" class="list-group-item">Item#03</a>
    </div>
</div>
<div class="list-group list-widget">
    <a href="#" class="list-group-item active">Lista#02</a>
    <div class="sub-itens">
      <a href="#" class="list-group-item">Item#01</a>
      <a href="#" class="list-group-item">Item#02</a>
      <a href="#" class="list-group-item">Item#03</a>
    </div>
</div>

1
  • 1
    Obrigado Wictor!
    – ElvisP
    1/02/2019 às 1:21

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 .