Início / coding / Perguntas / 76936457
Accepted
BobDev
Asked: 2023-08-20 02:08:57 +0800 CST

Mostrar/ocultar itens automaticamente em jquery

  • 772

Sou iniciante em jQuery.

Eu gostaria de modificar o componente bootstrap de forma que os campos apareçam um após o outro em um loop durante um determinado período de tempo. Quando o evento "clique" padrão (colapso de bootstrap) é acionado em qualquer elemento, o tempo será redefinido e o loop começará a iterar a partir desse elemento. Eu quero que isso percorra continuamente os divs até que o visitante saia da página. Como conseguir tal efeito?

Este é um exemplo de um componente bootstrap no qual eu gostaria de fazer isso:

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExampleOne" role="button" aria-expanded="false" aria-controls="collapseExampleOne">
    Link with href
  </a>
  
</p>
<div class="collapse" id="collapseExampleOne">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExampleTwo" role="button" aria-expanded="false" aria-controls="collapseExampleTwo">
    Link with href
  </a>
  
</p>
<div class="collapse" id="collapseExampleTwo">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Preciso de ajuda passo a passo para conseguir isso. Eu sou novo no stackoverflow, mas aprendo rápido, então tenha paciência comigo :)

Qualquer ajuda é muito apreciada.

jquery

1 respostas

  1. Best Answer

    Você pode adicionar essas três linhas de código JS para permitir que apenas um recolhível seja expandido por vez:

    $("a[data-toggle]").click(function () {
    $(".collapse").not($(this).attr("href")).collapse("hide");
});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExampleOne" role="button" aria-expanded="false" aria-controls="collapseExampleOne">
    Link with href
  </a>
  
</p>
<div class="collapse" id="collapseExampleOne">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExampleTwo" role="button" aria-expanded="false" aria-controls="collapseExampleTwo">
    Link with href
  </a>
  
</p>
<div class="collapse" id="collapseExampleTwo">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

    • 0

relate perguntas